/* Regular 400 */
@font-face {
    font-family: "Satoshi";
    src: url("../fonts/Satoshi-Regular.ttf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Regular 500 */
@font-face {
    font-family: "Satoshi";
    src: url("../fonts/Satoshi-Medium.ttf") format("opentype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* Bold 700 */
@font-face {
    font-family: "Satoshi";
    src: url("../fonts/Satoshi-Bold.ttf") format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* =========== GLOBAL SETTINGS ================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
* {
    /* outline: 1px solid red; */
}

body {
    font-family: "Satoshi" !important;
}

/* ================= VARIABLES ================= */
:root {
    --primary-color: #10539b;
    --secondary-color: #10539b0d;
    --bg-light: #f8f8f8;
    --bg-soft: #f6f8fb;
    --bg-white: #ffffff;
    --bg-black: #000000;

    --text-dark: #000000;
    --text-medium: #3a5f85;
    --text-light: #6f8fb3;
    --text-white: #ffffff;
    --text-muted: #484848;
    --text-muted-2: #dad9d9;
    --text-soft-muted: #a09d9d;
    --text-para: #676767;

    --border-white: #ffffff;
    --border-light: #ffffff4d;
    --border-muted: #0e0e0e26;
    --border-blue: #c7d9eb65;
    --border-blue-varient: #a7cff733;
    --border-red-outline: #cc00000d;

    --btn-primary-bg: #10539b;
    --btn-white: #ffffff;

    --btn-secondary-bg: #ffffff;
    --btn-secondary-border: #f2b3b66c;
    --btn-secondary-text: #cc0000;
    --btn-secondary-soft: #cc000010;
    --btn-blue-varient: #14589e;

    --star-yellow: #ffc107;
    --cta-color: #d56700;
    --cta-red-color: #cc0000;
    --scs-green: #00c059;

    --icon-blue: #14589e;
    --icon-muted: #aac3da;

    --shadow-soft: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    --shadow-card: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

/* ================= COMMON ================= */
ul li {
    list-style: none;
}

a {
    text-decoration: none !important;
}

.container-fluid {
    padding: 0px 50px;
}

p,
a,
li {
    font-size: 14px;
}

.fw-400 {
    font-weight: 400;
}

.fw-500 {
    font-weight: 500;
}

.fw-700 {
    font-weight: 700;
}

.fs-13 {
    font-size: 13px;
}

.fs-14 {
    font-size: 14px !important;
}

.fs-15 {
    font-size: 15px !important;
}

/* button style */
/* Red Btn */
.primary-button {
    font-size: 14px;
    border: none;
    background-color: var(--btn-secondary-text);
    color: var(--btn-white);
    stroke: var(--btn-white);
}

.primary-button {
    position: relative;
    overflow: hidden;
}

.arrow-wrap {
    position: relative;
    width: 15px;
    height: 15px;
    display: inline-block;
}

.arrow {
    position: absolute;
    left: 0;
    top: -5px;
    transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.arrow-1 {
    transform: translateY(3px);
}

.arrow-2 {
    transform: translateY(35px);
}

.primary-button:hover .arrow-1 {
    transform: translateY(-30px);
}

.primary-button:hover .arrow-2 {
    transform: translateY(3px);
}

/* blue btn */
.blue-btn {
    border: none;
    background-color: var(--primary-color);
    color: var(--btn-white);
    stroke: var(--btn-white);
}

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

.blue-btn:hover .arrow-1 {
    transform: translateY(-30px);
}

.blue-btn:hover .arrow-2 {
    transform: translateY(3px);
}

/* blue varient-2 btn */
.blue-light-btn {
    border: none;
    background-color: var(--btn-blue-varient);
    color: var(--btn-white);
    stroke: var(--btn-white);
    border: 1px solid var(--border-blue-varient);
    font-size: 13px;
}

.blue-light-btn {
    position: relative;
    overflow: hidden;
}

.blue-light-btn .arrow-1 {
    transform: translateY(5px);
}

.blue-light-btn:hover .arrow-1 {
    transform: translateY(-30px);
}

.blue-light-btn:hover .arrow-2 {
    transform: translateY(5px);
}

/* white btn */
.white-btn {
    border: none;
    background-color: var(--btn-secondary-bg);
    color: var(--primary-color);
    stroke: var(--primary-color);
    border: 1px solid var(--border-blue-varient);
    font-size: 13px;
}

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

.white-btn .arrow-1 {
    transform: translateY(5px);
}

.white-btn:hover .arrow-1 {
    transform: translateY(-30px);
}

.white-btn:hover .arrow-2 {
    transform: translateY(5px);
}

/* red-outline-btn */
.red-outline-btn {
    border: none;
    background-color: var(--btn-white);
    color: var(--btn-secondary-text);
    stroke: var(--btn-secondary-text);
}

.red-outline-btn {
    position: relative;
    overflow: hidden;
}

.red-outline-btn:hover .arrow-1 {
    transform: translateY(-30px);
}

.red-outline-btn:hover .arrow-2 {
    transform: translateY(3px);
}

/* orange btn */
.orange-btn {
    border: none;
    background-color: var(--cta-color);
    color: var(--btn-white);
    stroke: var(--btn-white);
    display: flex;
    align-items: baseline;
}

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

.orange-btn:hover .arrow-1 {
    transform: translateY(-30px);
}

.orange-btn:hover .arrow-2 {
    transform: translateY(3px);
}

/* ================= TOP NAV ================= */
.top-nav {
    background-color: var(--primary-color);
}

.top-nav p,
.top-nav a {
    color: var(--text-white);
}

.nav-left p+p {
    border-left: 1px solid var(--border-light);
    padding-left: 20px;
}

.nav-left svg,
.nav-left p {
    color: rgba(245, 245, 245, 0.9);
    stroke: rgba(245, 245, 245, 0.9);
}

.nav-right li {
    border-left: 1px solid var(--border-light);
}

.nav-right li:first-child {
    border-left: none;
}

.main-nav .dropdown-menu {
    background-color: var(--bg-light) !important;
}

.main-nav .dropdown-menu li a {
    color: var(--text-dark) !important;
}

.main-nav .dropdown-menu li a:hover {
    color: var(--primary-color) !important;
}

.dropdown-toggle::after {
    display: none;
}

.nav-right .dropdown-toggle::after {
    display: none;
}

.custom-arrow {
    display: inline-block;
    margin-left: 6px;
    margin-bottom: 3px;
    width: 7px;
    height: 7px;
    border-right: 1px solid var(--text-white);
    border-bottom: 1px solid var(--text-white);
    transform: rotate(45deg);
    transition: transform 0.3s ease;
}

/* .show .custom-arrow {
    transform: rotate(-135deg);
    margin-bottom: 0px;
} */

/* ================= MAIN NAV ================= */
.navbar {
    border-bottom: 1px solid var(--border-blue);
    box-shadow: 0 6px 8px -6px rgba(0, 0, 0, 0.12);
}

.nav-logo {
    width: 200px;
    height: 80px;
}

.nav-logo img {
    width: 100%;
    height: 100%;
}

.navbar-nav .nav-link {
    color: var(--text-dark);
    font-weight: 500;
    transition: color 0.3s ease;
}

.navbar-nav .nav-link.active {
    color: var(--primary-color) !important;
    font-weight: 700;
}

.navbar-nav .nav-item.dropdown:has(.nav-link.active) .dropdown-toggle {
    color: var(--primary-color);
}

.navbar-nav>.nav-item>.nav-link:hover {
    color: var(--primary-color) !important;
}

.navbar-nav {
    gap: 30px;
}

.navbar-toggler {
    padding: 0px;
    border: none;
}

.navbar-toggler:focus {
    box-shadow: none;
}

.navbar-toggler-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    background-image: url("../icon-svg/bars-staggered.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}

/* Buttons */
.nav-button a {
    position: relative;
    border-radius: 50%;
    /* ensures perfect circle */
    width: 40px;
    height: 40px;
    border: 1px solid var(--border-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 1;
    transition: transform 0.3s ease;
}

.nav-button a::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--btn-primary-bg);
    border-radius: 50%;
    transform: scale(0);
    transition: transform 0.4s ease;
    z-index: -1;
}

.nav-button a:hover::before {
    transform: scale(1);
}

.nav-button svg {
    stroke: var(--text-dark);
    transition: stroke 0.3s ease;
}

.nav-button a:hover svg {
    stroke: var(--text-white);
}

.nav-button-link.active {
    background-color: var(--primary-color);
}

.nav-button-link.active svg {
    stroke: var(--btn-white);
}

.navbar .dropdown-toggle::after {
    display: none !important;
}

.navbar .custom-toggle {
    display: flex;
    align-items: center;
}

.navbar .custom-arrow {
    width: 8px;
    height: 8px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.25s ease;
    margin-left: -5px;
}

/* .dropdown.show .custom-arrow {
    transform: rotate(-135deg);
} */

/* ------- mega-menu BASE -------- */
.mega-dropdown {
    position: static;
}

.mega-menu {
    position: absolute;
    top: 78%;
    left: 0;
    right: 0;
    width: 100%;
    background: var(--bg-white);
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transform: translateY(20px);
    transition: all .25s ease;
    z-index: 1050;
}

.mega-dropdown.active .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* .mega-scroll-area {
  max-height: 420px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 6px;
} */
/* product card */
.mega-product {
    display: block;
    text-align: left;
}

.mega-img {
    width: 230px;
    height: 140px;
    background: var(--bg-light);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 10px;
    border: 1px solid var(--text-muted-2);
}

.mega-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.mega-title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 2px;
    color: var(--text-dark);
}

.mega-meta {
    font-size: 12px;
    font-weight: 500;
    color: var(--primary-color);
}

.mega-close-btn {
    background: transparent;
    border: none;
}

/* ================= MAIN FOOTER ==================== */
.main-footer {
    background-color: #10539b1c;
}

.main-footer h5 {
    color: var(--primary-color);
}

.footer-button a {
    background-color: var(--btn-white);
    color: var(--primary-color);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.footer-link a {
    color: var(--text-dark);
}

.footer-button a:hover {
    border: 1px solid var(--btn-primary-bg);
    background-color: var(--btn-primary-bg);
    box-shadow: inset 0 0 0 3px white;
    color: var(--btn-white);
}

.footer-link ul li :hover {
    color: var(--primary-color);
    cursor: pointer;
}

.footer-border {
    border: none;
    height: 1px;
    background: linear-gradient(to right,
            transparent 0%,
            #3ad0d500 0%,
            #3a4fd554 50%,
            #3ad0d500 100%,
            transparent 100%);
}

.footer-contact svg {
    stroke: var(--primary-color);
}

.footer-copyrights {
    background-color: var(--primary-color);
}

.footer-copyrights p {
    color: var(--text-white);
}

.footer-copyrights span a {
    color: var(--text-white);
}

/* ================== HERO SECTION=============== */
.hero {
    background-color: #e1eaf4;
    /* height: fit-content; */
}

.hero h1 {
    font-size: 48px;
    color: var(--primary-color);
}

.hero p {
    font-size: 15px;
    color: var(--primary-color);
}

.hero h6{
    position: relative;
    display: inline-block;
    padding-right: 60px;
    margin: 0;
    color: var(--btn-secondary-text);
}

.hero h6::after{
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 45px;
    height: 2px;
    background-color: var(--btn-secondary-text);
    transform: translateY(-50%);
}

.hero-link a {
    background-color: var(--btn-white);
    color: var(--primary-color);
    font-size: 16px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.hero-link a:hover {
    border: 1px solid var(--btn-primary-bg);
    background-color: var(--btn-primary-bg);
    box-shadow: inset 0 0 0 3px white;
    color: var(--btn-white);
}

/* hero button */
.hero-button button {
    border: none;
    background-color: var(--btn-secondary-text);
    color: var(--btn-white);
    stroke: var(--btn-white);
    padding: 9px 40px;
}

.hero-right .swiper-slide {
    display: flex;
    justify-content: center;
}

.hero-right .swiper-slide img {
    max-width: 320px;
    max-height: 400px;
    width: 100%;
    height: auto;
    object-fit: contain;
    -webkit-box-reflect: below 5px linear-gradient(transparent, rgba(0, 0, 0, 0.25)) !important;
}

.hero-pagination {
    position: absolute;
    right: 60px;
    top: 50%;
    transform: translateY(-50%);
}

.hero-bullet {
    cursor: pointer;
    opacity: 0.4;
    transition: 0.3s;
}

.hero-bullet.active {
    opacity: 1;
    transform: scale(1.2);
}

.myHero .swiper-pagination-bullet {
    background-color: transparent;
}

.myHero {
    position: relative;
}

.myHero .swiper-pagination {
    position: absolute;
    right: 20px;
    left: 50% !important;
    top: 20% !important;
    bottom: auto;
    transform: translate(-50%, -50%);
    width: auto;
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: end;
    gap: 20px;
    z-index: 0;
}

.myHero .swiper-pagination-bullet {
    margin: 8px var(--swiper-pagination-bullet-horizontal-gap, 15px) !important;
}

/* ============== CATEGORIES ==================== */

.categories-card .card-header {
    /* width: clamp(120px, 20vw, 180px); */
    aspect-ratio: 1 / 1;
    background-color: var(--bg-light);
    display: flex;
    justify-content: center;
    align-items: center;
}

.categories-card .card-header img {
    max-width: clamp(120px, 20vw, 140px);
    max-height: clamp(120px, 20vw, 140px);
    transition: transform 0.3s ease;
}

.categories-card img:hover {
    transform: translateY(-5px);
}

.card-text {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.categories a {
    color: var(--text-dark);
}

/* ================ Our Makes ================= */
.makes-card {
    background-color: var(--bg-light);
}

.makes-card-content a {
    color: var(--primary-color);
}

.makes-card img {
    max-width: clamp(100px, 20vw, 120px);
    max-height: clamp(100px, 20vw, 120px);
    transition: transform 0.3s ease;
}

.makes-card:hover img {
    transform: translateX(-10px);
}

.makes-card-content h6 {
    font-size: 18px;
}

/* ============== TOP SELLING PRODUCT ========== */
.top-selling-card .card-header {
    background-color: var(--bg-light);
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    border-radius: 18px;
}

.top-selling-card .card-header img {
    width: 75%;
    height: 75%;
    object-fit: contain;
    transition: transform 0.5s ease;
}

.top-selling-card:hover .card-header img {
    transform: scale(1.05);
}

.stars i {
    font-size: 13px;
    color: var(--star-yellow);
}

.top-selling-card .card-price {
    color: var(--primary-color);
}

.card-logo-bg {
    background-color: var(--bg-light);
}

.logo-tooltip .tooltip-inner {
    background-color: white !important;
    color: var(--text-dark) !important;
    font-size: 10px;
    padding: 6px 10px;
    border-radius: 6px;
    box-shadow: none;
}

.logo-tooltip .tooltip-arrow::before {
    border-color: transparent !important;
}

.logo-tooltip.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: var(--text-white) !important;
}

.mini-btn {
    position: relative;
    overflow: hidden;
    border: none;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--btn-white);
    box-shadow: var(--shadow-soft);
    transition: color 0.3s ease;
}

.mini-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--btn-primary-bg);
    border-radius: 50%;
    transform: scale(0);
    transition: transform 0.35s ease;
    z-index: 0;
}

.mini-btn:hover::before {
    transform: scale(1);
}

.mini-btn>* {
    position: relative;
    z-index: 1;
}

.mini-btn:hover {
    color: var(--text-white);
}

.mini-btn svg {
    stroke: var(--text-dark);
    transition: all 0.3s ease;
}

.mini-btn.wishlist.active {
    background-color: var(--btn-primary-bg);
}

.mini-btn.wishlist:hover svg {
    stroke: var(--text-white);
}

.mini-btn.wishlist.active svg {
    stroke: var(--text-white);
    fill: var(--text-white);
}

.mini-btn.compare {
    position: relative;
}

.mini-btn.compare svg {
    position: absolute;
    font-size: 18px;
    transition: all 0.3s ease;
}

.icon-default {
    opacity: 1;
    transform: scale(1);
}

.icon-tick {
    opacity: 0;
    transform: scale(0.5);
    color: var(--text-white);
}

.mini-btn.compare:hover svg {
    stroke: var(--text-white);
}

.mini-btn.compare.active {
    background: var(--primary-color);
}

.mini-btn.compare.active .icon-default {
    opacity: 0;
    transform: scale(0.5);
}

.mini-btn.compare.active .icon-tick {
    opacity: 1;
    transform: scale(1);
}

.card-btn {
    top: 15px;
    right: 10px;
    transform: translateX(50px);
    transition: transform 0.5s ease;
}

.top-selling-card:hover .card-btn {
    transform: translateX(-5px);
}

.tooltip-inner {
    background-color: var(--primary-color) !important;
    /* your color */
    color: var(--bg-light);
    font-size: 13px;
    padding: 6px 10px;
    border-radius: 6px;
}

.tooltip {
    --bs-tooltip-bg: var(--primary-color) !important;
}

.card-body p {
    font-size: 15px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.top-selling-card .primary-button {
    font-size: 13px;
}

/* ============ CTA SECTION ============== */
.cta-left {
    width: 100%;
    height: 100%;
    background: radial-gradient(
        circle at center,
        hsla(28, 100%, 95%, 1) 0%,
        hsla(29, 82%, 81%, 1) 100%
    );
}

.cta-left h1 {
    color: var(--cta-color);
    font-size: clamp(28px, 4vw, 52px);
    line-height: 68px;
    font-size: 48px;
}

.cta-left p {
    color: var(--text-para);
    line-height: 28px;
    font-weight: 500;
}

.cta-left-wrapper{
    width: 370px;
    height: 400px;
    object-fit: cover;
}
.cta-left-wrapper img{
    width: 100%;
    height: 100%;
    object-position: center;
}

.cta-right-1 {
    background: radial-gradient(circle at 70% 50%, rgb(193 212 237 / 80%) 0%, #00000000 40%), linear-gradient(237deg, #d6ebff 0%, #ecf6ff 45%, #dce5f2 100%);
}
.cta-right-1-wrapper{
    width: 230px;
    height: 250px;
    object-fit: cover;
}
.cta-right-1-wrapper img{
    width: 100%;
    height: 100%;
    object-position: center;
    transform: translateY(15px);
}

.cta-right-1 h3 {
    font-size: 25px;
    color: var(--primary-color);
    font-weight: 900;
}

.cta-right-1 p {
    color: var(--text-dark);
    line-height: 28px;
    font-weight: 500;
}

.cta-right-2 {
    background-color: #e00000;
    
}
.cta-right-2-wrapper{
    width: 230px;
    height: 200px;
    object-fit: cover;
}
.cta-right-2-wrapper img{
    width: 100%;
    height: 100%;
    object-position: center;
}

.cta-right-2 h3 {
    font-size: 25px;
    color: var(--text-white);
    font-weight: 900;
}

.cta-right-2 p {
    color: var(--text-white);
    line-height: 28px;
    font-weight: 500;
}

.cta p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ================ NEW ARRIVAL SECTION ============ */
.new-arrival-card {
    background-color: #f6f8fb;
}

.new-arrival-card .card-header {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    border-radius: 18px;
}

.new-arrival-card .card-header img {
    width: 75%;
    height: 75%;
    object-fit: contain;
    transition: transform 0.5s ease;
}

.new-arrival-card:hover .card-header img {
    transform: scale(1.05);
}

.new-arrival-card .card-price {
    color: var(--primary-color);
}

.new-arrival-card:hover .card-btn {
    transform: translateX(-5px);
}

.new-arrival-card .primary-button {
    font-size: 13px;
}

/* ================ RECENT SECTION =============== */


.recent-card .card-header img {
    width: 75%;
    height: 75%;
    object-fit: contain;
    transition: transform 0.5s ease;
}

.recent-card:hover .card-header img {
    transform: scale(1.05);
}

.recent-card .card-price {
    color: var(--primary-color);
}

.recent-card:hover .card-btn {
    transform: translateX(-5px);
}

.recent-card .primary-button {
    font-size: 13px;
}

/* ================ TESTIMONIAL ============= */
.testimonial {
    background-color: var(--secondary-color);
}

.testimonial .swiper {
    height: clamp(260px, 35vw, 300px);
}

.testimonial-card {
    background: #fff;
    position: relative;
    padding: 30px;
    border-radius: 15px;
    position: relative;
    max-height: clamp(140px, 20vw, 160px);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
}

.testimonial-card::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 40px;
    width: 20px;
    height: 20px;
    background: #fff;
    transform: rotate(45deg);
    box-shadow: 2px 1px 3px rgba(0, 0, 0, 0.12);
}

.testimonial-card:hover,
.testimonial-card:hover::after {
    background-color: var(--primary-color);
    color: var(--text-white);
}

.swiper-prev,
.swiper-nxt,
.custom-prev,
.custom-next {
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    background-color: transparent;
    border: 1px solid var(--primary-color);
    padding: 10px 14px;
}

.swiper-prev:hover,
.swiper-nxt:hover,
.custom-next:hover,
.custom-prev:hover {
    background-color: var(--primary-color);
    color: var(--text-white);
}

.testimonialSwiper .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background-color: var(--text-muted-2);
    opacity: 1;
}

/* active bullet */
.testimonialSwiper .swiper-pagination-bullet-active {
    background-color: var(--primary-color);
}

.testimonial p {
    font-weight: 500;
    color: var(--text-para);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

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

.testimonial-card img {
    width: 80px;
    height: 60px;
    bottom: 10px;
    right: 10px;
    position: absolute;
}

.client-info-wrapper {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
}

.client-info-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.client-info h6 {
    color: var(--text-dark);
}

.client-info p {
    color: var(--text-para);
    font-size: 13px;
}

/* ============== SUPPORT SECTION ============= */
.support p {
    color: var(--text-para);
}

.support-card {
    border-left: 2px solid transparent;
    border-image: repeating-linear-gradient(to bottom,
            var(--border-blue) 0 6px,
            transparent 6px 12px) 1;
}

.support .col-lg-4:first-child .support-card {
    border-left: none;
}

/* ============== PRODUCT CATEGORIES =============== */
.categories-count {
    color: var(--text-para);
}

.categories-count span {
    color: var(--primary-color);
}

.category-search {
    max-width: 330px;
}

.category-search,
.product-search {
    position: relative;
    width: 100%;
    max-width: 350px;
}

.search-input {
    width: 100%;
    padding: 10px 40px 10px 18px;
    border-radius: 50px;
    border: 1px solid var(--text-muted-2);
    outline: none;
    transition: all 0.3s ease;
}

.search-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);
}

.search-input::placeholder {
    color: var(--text-muted);
    font-weight: 500;
}

.search-btn {
    position: absolute;
    top: 50%;
    right: 18px;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    padding: 0;
    font-size: 14px;
    color: var(--text-muted);
}

.search-btn svg {
    stroke: var(--text-para);
}

.search-btn:hover svg {
    stroke: var(--primary-color);
}

/* .search-btn:hover i {
    color: var(--primary-color);
} */
.category-card {
    background-color: var(--bg-light);
}

.category-img-wrap {
    height: clamp(180px, 22vw, 220px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 30px;
}

.category-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.5s ease;
}

.category-img-wrap img:hover {
    transform: scale(1.05);
}

.category-footer {
    background-color: var(--btn-primary-bg);
}

.category-footer h6 {
    color: var(--text-white);
}

.category-card p {
    color: var(--text-para);
    font-weight: 500;
}

.accordion-button::after {
    display: none !important;
}

.accordion-button {
    display: flex;
    align-items: center;
}

/* default = collapsed (down arrow) */
.accordion .custom-arrow {
    margin-left: auto;
    width: 10px;
    height: 10px;
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
    transform: rotate(45deg);
    /* down */
    transition: transform 0.3s ease;
}

/* active (open) = arrow up */
.accordion-button:not(.collapsed) .custom-arrow {
    transform: rotate(-135deg);
    /* up */
}

/* ================ PRODUCTS LIST PAGE ================ */

.product-list-toolbar {
    background-color: var(--bg-soft);
}

.main-product-search {
    position: relative;
    width: 100%;
    max-width: 100%;
}

.products-list-page .search-input {
    width: 100%;
    padding-left: 10px !important;
    border-radius: 50px;
    border: 1px solid var(--border-blue);
    outline: none;
    transition: all 0.3s ease;
}

.products-list-page .search-btn {
    position: absolute;
    top: 50%;
    right: 30px;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    padding: 0;
    font-size: 14px;
    color: var(--text-muted);
}

.product-search {
    position: relative;
    width: 100%;
    max-width: 100%;
}

.products-list-page .accordion {
    --bs-accordion-bg: transparent;
    --bs-accordion-border-color: transparent;
}

.products-list-page .accordion-item {
    background-color: transparent !important;
    border-radius: 0px !important;
    border: none !important;
    border-top: 1px solid var(--border-blue) !important;
}

.products-list-page .accordion-button {
    background-color: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    font-weight: bold !important;
    font-size: 18px !important;
}

.products-list-page .accordion-body {
    background-color: transparent !important;
    padding: 0px 20px 0px 20px !important;
}

.products-list-page .accordion-body .search-input {
    width: 100%;
    padding: 5px 40px 5px 18px;
    border-radius: 50px;
    border: none;
    outline: none;
    transition: all 0.3s ease;
}

.products-list-page .accordion-body .search-btn {
    position: absolute;
    width: 15px;
    height: 15px;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    padding: 0;
    font-size: 13px;
    color: var(--text-muted);
}

.products-list-page .accordion-body .search-input::placeholder,
.products-list-page .accordion-body .search-btn {
    color: var(--text-soft-muted);
    font-size: 14px;
}

.check-label {
    display: flex;
    align-items: stretch;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.2;
}

.check-label input {
    appearance: none;
    -webkit-appearance: none;
    width: 19px;
    height: 19px;
    border: 1px solid var(--text-muted-2);
    border-radius: 4px;
    cursor: pointer;
    position: relative;
}

.check-label input:checked {
    background-color: var(--primary-color);
}

.check-label input:checked::after {
    content: "";
    position: absolute;
    width: 6px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    top: 1px;
    left: 5px;
}

.check-label {
    /* font-size: 16px !important; */
    color: var(--text-muted);
}

.checkList {
    padding-left: 10px;
}

.checkList li {
    list-style: none;
    padding: 0px 5px 0px 5px;
    margin-bottom: 8px;
}

.checkList li:last-child {
    padding-bottom: 0px;
    margin-bottom: 0px;
}

.checkList .item {
    padding-bottom: 10px;
}

#addmore {
    border: none;
    color: var(--primary-color);
    font-size: 13px;
    background-color: transparent;
}

.check-label i {
    color: var(--star-yellow);
    font-size: 10px;
}

/* price slider */
.price-range-slider {
    width: 100%;
}

.clear-filter {
    color: var(--primary-color);
    font-weight: 500;
}

/* SLIDER */
.range-slider {
    position: relative;
    height: 6px;
    margin: 30px 0;
}

.range-slider::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 6px;
    background: #e5e5e5;
    border-radius: 10px;
    z-index: 1;
}

.range-slider::after {
    content: "";
    position: absolute;
    height: 6px;
    background: var(--primary-color);
    border-radius: 10px;
    left: var(--min);
    right: var(--max);
    z-index: 2;
}

.range-slider input[type="range"] {
    position: absolute;
    width: 100%;
    height: 6px;
    background: none;
    pointer-events: none;
    z-index: 3;
    -webkit-appearance: none;
}

.range-slider input::-webkit-slider-thumb {
    pointer-events: auto;
    width: 22px;
    height: 22px;
    background: #fff;
    border-radius: 50%;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    position: relative;
    z-index: 4;
    -webkit-appearance: none;
}

.range-values {
    display: flex;
    align-items: center;
    gap: 12px;
}

.range-values input {
    width: 100%;
    border: 1px solid var(--text-muted-2);
    border-radius: 8px;
    padding: 5px;
    background-color: transparent;
    color: var(--text-muted);
}

.range-values span {
    color: var(--text-muted);
}

/* product card style */

.product-card {
    border: 1px solid var(--border-blue);
    background-color: var(--bg-soft);
}

.product-img-wrapper {
    max-width: 380px;
    padding: 50px;
}

.product-info a {
    color: var(--primary-color);
    text-decoration: underline !important;
}

.product-info .product-title {
    color: var(--text-dark);
}

.product-info .product-desc {
    color: var(--text-dark);
    font-weight: 500;
}

.product-img-wrapper .card-btn {
    right: 50px;
    top: 20px;
}

.brand-logo {
    max-width: 40px;
    padding: 5px;
    background-color: var(--btn-secondary-bg);
}

.product-rating .rating {
    color: var(--text-para) !important;
    font-size: 12px !important;
}

.stars span:nth-of-type(1) {
    font-size: 14px;
    color: var(--text-dark);
}

.stars span:nth-of-type(2) {
    font-size: 12px;
    color: var(--text-muted);
}

.key-features-title {
    color: var(--primary-color);
}

.key-features {
    background-color: var(--text-white);
}

.key-features p {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-dark);
}

.key-features .col-4 {
    border-left: 1px solid var(--border-blue);
}

.key-features .col-4:first-child {
    border-left: none;
}

.product-card-footer {
    border: 1px solid var(--border-blue);
    background-color: var(--primary-color);
}

.product-card-footer .price {
    font-size: 30px;
    color: var(--text-white);
}

.actions-check-label {
    font-size: 14px;
    color: var(--text-white);
}

.compare-check {
    accent-color: var(--text-white) !important;
    border-radius: 4px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.compare-check {
    accent-color: var(--text-white) !important;
}

.product-card-results {
    color: var(--text-para);
    font-weight: 500;
}

.product-card-fillter p {
    color: var(--text-dark);
    font-weight: 500;
    font-size: 16px;
}

.product-card-fillter .dropdown button {
    color: var(--text-muted) !important;
    font-weight: 500;
    font-size: 14px;
}

.product-card-fillter .btn {
    border: 1px solid var(--border-muted);
    box-shadow: none;
}

.product-card-fillter .btn:hover {
    border: 1px solid var(--border-muted);
}

.product-card-fillter .btn.show {
    border-color: var(--border-muted);
    box-shadow: none;
    outline: none;
}

.product-card-fillter .btn:active {
    border: 1px solid var(--border-muted) !important;
}

.product-card-fillter .dropdown-menu button:active {
    background-color: var(--primary-color) !important;
    color: var(--text-white) !important;
}

.product-card-fillter .dropdown-menu {
    background-color: var(--text-white) !important;
    border: none;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.product-info .series span {
    background-color: var(--primary-color);
    color: var(--text-white);
    font-size: 12px;
    padding: 5px 10px;
}

.product-info .series h6 {
    color: var(--primary-color);
}

/* =============== PRODUCT DETAILS ============= */
/* Thumbnail slider */
.productDetailsThumbs .swiper-slide {
    height: 90px;
    overflow: hidden;
    border-radius: 6px;
    opacity: 0.5;
    cursor: pointer;
}

.productDetailsThumbs .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.productDetailsThumbs .swiper-slide-thumb-active {
    opacity: 1;
}

.productDetailsSwiper {
    height: clamp(280px, 40vw, 420px);
}

.productDetailsSwiper .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(320px, 45vw, 480px);
    height: clamp(280px, 40vw, 400px);
    background-color: var(--bg-light);
    border-radius: 10px;
    padding: clamp(24px, 6vw, 60px);
}

.productDetailsSwiper img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.productDetailsThumbs {
    height: 100px;
    overflow: visible;
}

.productDetailsThumbs .swiper-slide {
    /* width: 90px !important; */
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    flex-shrink: 0;
    opacity: 0.5;
    cursor: pointer;
    background-color: var(--bg-light);
}

.productDetailsThumbs img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    padding: 10px;
}

.productDetailsThumbs .swiper-slide-thumb-active {
    opacity: 1;
    border: 1px solid var(--primary-color);
}

.productDetailsThumbs .swiper-slide {
    opacity: 1 !important;
}

.thumb-prev,
.thumb-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--text-white);
    border: 1px solid var(--text-muted-2);
    cursor: pointer;
    color: var(--primary-color);
    font-size: 20px;
}

.thumb-prev {
    left: -10px;
    top: 40px;
}

.thumb-next {
    right: -10px;
    top: 40px;
}

.products-detail .card-btn {
    top: 70px;
    right: 20px;
    left: auto;
    bottom: auto;
    transform: none;
    z-index: 10;
}

.products-detail .zoom {
    top: 20px;
    left: 20px;
    z-index: 10;
}

.mini-btn.zoom:hover svg {
    stroke: var(--text-white);
}

.product-detail .product-title span {
    color: var(--primary-color);
}

.product-price p {
    color: var(--text-para);
}

.product-detail .brand-logo {
    border: 1px solid var(--border-blue);
}

.product-detail .product-desc {
    font-size: 13px;
}

.specifications {
    border-top: 1px solid var(--bg-light);
}

.specifications .dropdown-menu {
    font-weight: 500;
    background-color: var(--text-white) !important;
    border: none;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.contact-us-get-in-touch .dropdown-toggle,
.specifications .dropdown-toggle {
    border: 1px solid var(--border-blue);
    background-color: transparent;
    padding: 8px 10px;
    border-radius: 8px;
    font-weight: 500;

    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--text-muted);
    font-size: 14px;
}

.contact-us-get-in-touch .dropdown-item,
.specifications .dropdown-item {
    font-weight: 500;
}

.specifications .dropdown-item:hover {
    color: var(--primary-color);
}

.specifications .dropdown-item.active,
.dropdown-item:active {
    background-color: transparent !important;
}

/* qty button */
.qty-counter {
    width: 150px;
    border: 1px solid var(--text-muted-2);
    overflow: hidden;
}

.qty-btn {
    width: 30px;
    height: 30px;
    border: 1px solid var(--text-muted-2);
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    background-color: transparent;
}

.qty-input {
    width: 50px;
    text-align: center;
    border: none;
    font-weight: 600;
    outline: none;
    box-shadow: none;
}

.product-detail .primary-button,
.red-outline-btn {
    font-size: 16px;
    font-weight: bold;
}

.product-detail .red-outline-btn {
    border: 1px solid var(--border-red-outline);
    background-color: var(--btn-secondary-soft);
}

.product-warranty p {
    color: var(--primary-color);
    text-decoration: none !important;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
}

.offcanvas.half-canvas {
    --bs-offcanvas-width: 50vw;
}

/* @media (max-width: 992px) {
    .offcanvas.half-canvas {
        --bs-offcanvas-width: 50vw;
    }
} */
.offcanvas-backdrop {
    background-color: rgba(0, 0, 0, 0.6);
}

.offcanvas-header {
    border-bottom: 1px solid var(--border-blue);
}

.canvas-content {
    line-height: 25px;
}

.canvas-content p,
.canvas-content li {
    font-size: 14px;
    color: var(--text-para);
    text-align: justify;
}

.canvas-content ul li {
    list-style-type: disc;
    line-height: 1.5;
}

.canvas-content ul li::marker {
    font-size: 1.4em;
    color: var(--primary-color);
}

.offcanvas .btn-close:focus,
.offcanvas .btn-close:active {
    box-shadow: none;
}

/* tab component */
/* .products-detail .nav-tabs:nth-child(1) {
    --bs-nav-tabs-border-width: none !important;} */
.products-detail .nav-tabs .nav-link {
    font-size: 16px;
    font-weight: bold;
}

.products-detail .nav-item {
    margin-right: 60px;
}

.products-detail .nav-link {
    color: var(--text-dark);
}

.products-detail .nav-link:hover {
    color: var(--text-dark);
}

.products-detail .nav-tabs .nav-link.active {
    color: var(--btn-white);
    background-color: var(--primary-color);
}

.products-detail #description p,
.products-detail #description li,
.products-detail #specifications p,
.products-detail #specifications li,
.products-detail #reviews p,
.products-detail #reviews li {
    font-size: 14px;
    color: var(--text-para);
}

.products-detail #description ul li {
    list-style-type: disc;
    line-height: 1.5;
}

.products-detail #description ul li::marker {
    font-size: 1.4em;
    color: var(--primary-color);
}

.products-detail .tab-content .tab-pane:nth-child(3) {
    background-color: var(--bg-light);
}

.products-detail .accordion-button {
    background-color: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    font-weight: bold !important;
    font-size: 16px !important;
}

.products-detail .accordion-item:nth-child(n) {
    border: 1px solid var(--bs-border-color);
}

.products-detail .accordion-body svg {
    stroke: var(--text-dark);
    background-color: var(--btn-white);
    padding: 10px;
    border-radius: 20px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    transition: all 0.3 ease;
}

.products-detail .accordion-body svg:hover {
    stroke: var(--btn-white);
    background-color: var(--primary-color);
}

.products-detail .accordion-header {
    color: var(--text-dark);
}

.products-detail .accordion-body li a {
    background-color: var(--bg-light);
    color: var(--text-dark);
    font-size: 16px;
    font-weight: bold;
}

.Description-wrapper {
    max-width: clamp(320px, 90vw, 900px);
    margin: 0;
    /* left aligned */
}

.Description-wrapper img {
    width: 100%;
    height: auto;
    /* max-height: 750px; */
    object-fit: contain;
}

/* @media (max-width: 768px){
    .Description-wrapper{
        max-height: 420px;
    }
} */

.product-serious .btn {
    border: 1px solid var(--icon-blue);
    box-shadow: none;
}

.products-detail .product-serious .dropdown-menu .dropdown-item:hover {
    color: var(--primary-color) !important;
    background-color: transparent !important;
}

.product-serious .sort-btn,
.product-serious .dropdown-menu {
    min-width: clamp(160px, 25vw, 240px);
}

.product-serious .btn:hover,
.product-serious .btn:focus,
.product-serious .btn:active,
.product-serious .btn.active {
    border-color: var(--icon-blue);
    box-shadow: none;
}

.product-serious .dropdown button {
    color: var(--text-dark) !important;
}

.products-detail .dropdown-toggle::after {
    display: none !important;
}

.products-detail .custom-toggle {
    display: flex;
    align-items: center;
}

.products-detail .custom-arrow {
    width: 8px;
    height: 8px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.25s ease;
    margin-left: -5px;
}

#imageZoomModal .modal-dialog {
    transform: none !important;
    transition: none !important;
}

#imageZoomModal img {
    transform: scale(0.6);
    opacity: 0;
    transition:
        transform 0.35s ease,
        opacity 0.35s ease;
}

#imageZoomModal.show img {
    transform: scale(1);
    opacity: 1;
}

#imageZoomModal .modal-content {
    background: transparent;
    border: none;
}

.modal-content h6 {
    font-size: 14px;
    color: var(--text-para);
}

.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.55) !important;
}

.modal-backdrop.show {
    opacity: 1 !important;
}

.discount-title img {
    width: 20px;
    height: 20px;
}

.discount-title p {
    color: var(--primary-color);
    font-weight: 500;
    margin-bottom: 0px;
}

.volume-discount-card {
    width: 150px;
    border: 1px solid var(--border-blue-varient);
    background-color: var(--secondary-color);
}

.volume-discount-card p {
    color: #0E0E0E;
    margin-bottom: 0px;
}

.discount {
    font-weight: 500;
    margin-bottom: 0px;
}

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

.discount p span {
    color: var(--primary-color);
}

.volumeDiscountSwiper {
    height: fit-content;
}

.volumeDiscountSwiper .swiper-slide {
    width: auto;
}

.volume-discount .swiper-button-disabled {
    opacity: 0;
    pointer-events: none;
}

.volume-prev {
    left: -10px;
}

.volume-next {
    right: -10px;
}

.volume-prev,
.volume-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--text-white);
    border: 1px solid var(--text-muted-2);
    cursor: pointer;
    color: var(--primary-color);
    font-size: 20px;
    text-align: center;
}

/* =============== MY BOQ ================ */
.boQ-header {
    background-color: var(--primary-color);
}

.boQ-vendor-logo {
    width: 40px;
    height: 40px;
    padding: 7px;
    background-color: var(--text-white);
    display: flex;
    align-items: center;
    justify-content: center;
}

.boQ-vendor-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.boQ-product-details h5 span,
.boQ-product-details h5 {
    color: var(--text-dark);
}

.boQ-product-details p {
    color: var(--text-para);
}

.boQ-checkbox {
    width: 20px !important;
    height: 20px !important;
    cursor: pointer;
}

.boQ-checkbox {
    border: 1px solid var(--text-white) !important;
    background-color: var(--primary-color) !important;
}

.boQ-checkbox:checked {
    background-color: var(--primary-color) !important;
    border-color: var(--text-white) !important;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffffff' d='M13.485 1.929l-7.071 7.071-2.828-2.829L1.929 7.586l4.485 4.485 8.485-8.485z'/%3E%3C/svg%3E");
}

.boQ-checkbox:focus {
    box-shadow: none !important;
}

.boQ-header-left h6 {
    color: var(--text-white);
}

.boQ-vendor-count h6 {
    color: var(--text-muted-2);
}

.my-boq-card {
    border: 1px solid var(--border-blue);
}

.boQ-product-card {
    border-bottom: 1px solid var(--border-blue);
}

.boQ-product-card:last-child {
    border-bottom: none;
}

.boQ-product-checkbox .boQ-checkbox {
    border: 1px solid var(--text-soft-muted) !important;
    background-color: var(--text-white) !important;
}

.boQ-product-checkbox .boQ-checkbox:checked {
    background-color: var(--text-white) !important;
    border-color: var(--text-soft-muted) !important;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%2310539b' d='M13.485 1.929l-7.071 7.071-2.828-2.829L1.929 7.586l4.485 4.485 8.485-8.485z'/%3E%3C/svg%3E");
}

.boQ-product-image {
    max-width: 180px;
    max-height: 160px;
    padding: 10px;
    border: 1px solid var(--border-blue);
}

.boQ-remove-btn {
    padding: 6px 6px;
    border: 1px solid var(--text-soft-muted);
    background-color: var(--text-white);
    color: var(--text-muted);
    font-size: 10px;
}

/* product qty button */
.boQ-quantity-control .qty-counter {
    width: 120px;
}

.boQ-quantity-control .qty-btn {
    width: 25px;
    height: 25px;
    font-size: 15px;
}

.boQ-quantity-control .qty-input {
    width: 30px;
}

.my-boq .primary-button,
.red-outline-btn {
    font-size: 16px;
}

.my-boq .red-outline-btn {
    border: 1px solid var(--border-red-outline);
    background-color: var(--btn-secondary-soft);
}

/* boq summary */
.boQ-summary-card {
    background-color: var(--bg-light);
    padding: 15px;
    padding-bottom: 10px;
}

.boQ-summary-vendor {
    background-color: var(--bg-white);
    padding-left: 12px;
    padding-right: 12px;
}

.boQ-summary-vendor-info {
    border-bottom: 1px dashed var(--text-muted-2);
    border-image: repeating-linear-gradient(to right,
            var(--text-muted-2) 0 10px,
            transparent 10px 20px) 1;
}

.boQ-summary-vendor-info .boQ-vendor-logo {
    width: 30px;
    height: 30px;
    padding: 5px;
    border: 1px solid var(--text-muted-2);
}

.boQ-summary-row p:first-child {
    color: var(--text-para);
    font-weight: 500;
}

.boQ-summary-footer {
    background-color: var(--primary-color);
    color: var(--text-white);
}

.my-boq-content .modal button {
    width: clamp(100px, 25vw, 110px);
    /* width: 110px; */
}

.my-boq #updateBoqToast,
.my-boq #boqToast {
    width: clamp(200px, 50vw, 280px);
    background-color: var(--scs-green) !important;
}

.boQ-enquiry-btn .primary-button {
    font-size: 15px;
}

/* ============ EMPTY CART ================ */
.cart-empty-image {
    width: clamp(120px, 40vw, 180px);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.cart-empty-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cart-empty-state h3 {
    color: var(--text-dark);
}

.cart-empty-state p {
    color: var(--text-para);
    font-size: 15px;
}

.cart-empty-state h3 span {
    color: var(--cta-red-color);
}

.cart-empty-state p {
    max-width: clamp(260px, 80vw, 420px);
}

.cart-empty-btn .primary-button:hover .arrow-2 {
    transform: translateY(5px);
}

.cart-empty-btn .arrow-1 {
    transform: translateY(5px);
}

.cart-empty-btn .primary-button {
    padding-left: 20px;
    padding-right: 20px;
}

/* =========== ABOUT US ============ */

/*--------- aboutUs-hero start--------- */
.about-header {
    background-image: url("../images/aboutus-image/about-banner.webp");
    min-height: 190px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

.page-header-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
            rgba(14, 14, 14, 0.9) 0%,
            rgba(16, 83, 155, 0.9) 100%);
}

.page-header-content {
    position: relative;
    z-index: 2;
    color: var(--text-white);
}

.page-header-content h1 {
    font-size: 48px;
}

.breadcrumb-list li,
.breadcrumb-list a {
    font-size: 16px;
    font-weight: 500;
}

.breadcrumb-item a {
    color: var(--text-light);
}

.breadcrumb-item+.breadcrumb-item::before {
    display: none;
}

.breadcrumb-list .custom-arrow {
    display: inline-block;
    margin: 0 12px 1px;
    width: 8px;
    height: 8px;
    border-right: 1px solid var(--text-white);
    border-bottom: 1px solid var(--text-white);
    transform: rotate(-45deg);
}

/*--------- aboutUs-hero end --------- */

/*--------- Brand intro start ---------*/
.brand-intro .brand-image-wrapper {
    width: clamp(280px, 80vw, 610px);
    height: clamp(120px, 25vw, 190px);
    margin: 0 auto;
}

.brand-intro .brand-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.brand-intro .brand-description {
    width: clamp(280px, 80vw, 650px);
    margin: 20px auto 0;
    text-align: center;
}

.brand-intro .brand-description p {
    font-size: clamp(16px, 2.5vw, 22px);
    font-weight: 400;
    line-height: 1.6;
    color: var(--text-dark);
    transform: translateY(-40px);
}

/*--------- Brand intro end ---------*/

/*--------- Brand intro start ---------*/
.about-who-we-are {
    padding-bottom: 100px;
}

.who-we-are-image-main {
    width: 460px;
    height: 580px;
    overflow: hidden;
    border: 7px solid var(--border-white);
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.who-we-are-image-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.who-we-are-image-overlay {
    top: 17%;
    right: 7%;
}

.image-ovrlay-main {
    position: relative;
    width: 320px;
    height: 320px;
    overflow: hidden;
    border: 7px solid var(--border-white);
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.image-ovrlay-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.who-we-are-sidelayer {
    position: absolute;
    width: clamp(240px, 45vw, 200px);
    height: clamp(300px, 45vw, 500px);
    top: 2%;
    right: -6%;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.who-we-are-sidelayer:hover {
    opacity: 0.1;
}

.who-we-are-sidelayer img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.video-control-btn {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    background: var(--primary-color);
    color: var(--bg-white);
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    animation: pulse 1.8s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(48, 48, 168, 0.226);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(255, 255, 255, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

.who-we-are-stats-badge {
    position: absolute;
    left: 20%;
    bottom: -10%;
    background-color: var(--primary-color);
    animation: floatLeftRight 3s ease-in-out infinite;
}

@keyframes floatLeftRight {
    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(25px);
    }

    100% {
        transform: translateX(0);
    }
}

.who-we-are-stats-badge span {
    font-size: 28px;
    color: var(--text-white);
}

.who-we-are-stats-badge p {
    color: var(--text-white);
    font-size: 16px;
}

/* right side content */
.section-tag {
    color: var(--btn-secondary-text);
    font-weight: 500;
}

.section-title {
    font-size: 38px;
    color: var(--text-dark);
    font-weight: 900;
    margin-top: 10px;
}

.section-title span {
    color: var(--primary-color);
}

.about-description {
    font-size: 14px;
    color: var(--text-para);
    line-height: 25px;
}

.who-we-are-growth li {
    color: var(--text-para);
    font-size: 14px;
    padding-bottom: 20px;
}

/* arrow image adjustment */
.who-we-are-growth li img {
    width: 13px;
    margin-right: 6px;
    margin-bottom: 6px;
}

/* mini slider */
.who-we-are-growthslider {
    /* max-width: 250px; */
    background-color: var(--primary-color);
}

.growthslider-header img {
    width: 50px;
}

.growthslider-header h1 {
    font-size: 45px;
    color: var(--text-light);
    opacity: 0.2;
}

.growthslider-body {
    color: var(--bg-soft);
}

/*--------- Brand intro end ---------*/

/* --------- why-us-section start --------- */
.half-bg {
    position: relative;
    overflow: hidden;
}

.half-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 50%;
    background-color: #10539b0a;
    z-index: 0;
}

.half-bg>* {
    position: relative;
    z-index: 1;
}

.why-us-card {
    position: relative;
    overflow: hidden;
    height: 100%;
    background: #fff;
    cursor: pointer;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.whyus-img-overly {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: translateX(-110%);
    transition: transform 0.8s ease;
    z-index: 1;
}

.whyus-color-overly {
    position: absolute;
    inset: 0;
    background-color: rgba(16, 83, 155, 0.85);
    transform: translateX(-110%);
    transition: transform 0.8s ease;
    z-index: 2;
}

.why-us-card>*:not(.whyus-img-overly):not(.whyus-color-overly) {
    position: relative;
    z-index: 3;
}


@media (hover: hover) and (pointer: fine) {
    .why-us-card h1,
    .why-us-card h6,
    .why-us-card p {
        transition: color 0.3s ease;
    }


    .why-us-card img {
        transition: filter 0.3s ease;
    }

    .why-us-card:hover img {
        filter: brightness(0) invert(1);
    }
}


.why-us-card-header {
    text-align: center;
}

.why-us-card-header img {
    width: 50px;
    height: 50px;
}

.why-us-card-header h1 {
    font-size: 45px;
    color: var(--text-light);
    opacity: 0.1;
    font-weight: 900;
    text-align: right;
}

.why-us-card-body {
    color: var(--bg-soft);
}

.why-us-card-body h6 {
    color: var(--text-dark);
    font-weight: 900;
}

.why-us-card-body p {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-para);
}

/* --------- why-us-section end --------- */

/* --------- Our Indudtry section start --------- */
.our-industry .swiper {
    height: 400px;
}

.our-industry .swiper-slide {
    height: 90%;
    /* border-radius: 12px; */
    background: #f8f9fa;
    text-align: center;
    position: relative;
    /* overflow: hidden; */
}

.our-industry .swiper-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
            rgba(16, 83, 155, 0.75) 0%,
            rgba(16, 83, 155, 0.45) 20%,
            rgba(16, 83, 155, 0) 90%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
    border-radius: 12px;
}

.our-industry .swiper-slide:hover::after {
    opacity: 1;
}

.our-industry .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

.our-industry .slide-title h6 {
    padding-top: 16px;
    font-weight: 500;
    color: #0e0e0e;
}

/* --------- Our Indudtry section end --------- */

/* --------- our-marketplace section start --------- */
.our-marketplace-header p {
    font-weight: 500;
    color: var(--text-para);
}

.marketplace-model__flow {
    border-bottom: 1px solid var(--border-blue);
}

.marketplace-model__icon {
    max-width: 50px;
    max-height: 50px;
    flex-shrink: 0;
}

.marketplace-model__icon img {
    width: 100%;
    height: 100%;
}

.marketplace-model__card-title {
    font-size: 15px;
    color: var(--text-dark);
}

.model-point img {
    width: 20px;
    height: 20px;
}

.model-point p {
    font-weight: 500;
    color: var(--text-para);
}

.marketplace-img-wrapper {
    /* max-width: 300px; */
    max-height: 420px;
    overflow: hidden;
}

.marketplace-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1);
    transition: transform 0.4s ease;
}

.marketplace-img-wrapper:hover img {
    transform: scale(1.2);
}

.market-badge {
    position: absolute;
    top: 40%;
    left: 40%;
    width: 130px;
    height: 130px;
    background-color: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.market-badge-inner {
    width: 115px;
    height: 115px;
    border-radius: 50%;
    color: var(--text-white);
    border: 1px dashed var(--border-light);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.market-badge-inner p {
    font-size: 13px;
}

.marketplace-line {
    height: 10px;
    background-color: var(--primary-color);
    transform: translateY(-10px);
}

#market-model-2 {
    transform: translateY(-20px);
}

/* --------- our-marketplace section end --------- */

/* --------- OEM section start --------- */
.oem-main-slider {
    background-color: var(--primary-color);
}

.oemTextSwiper .swiper-slide {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.6s ease;
}

.oemTextSwiper .swiper-slide-active {
    opacity: 1;
    transform: translateY(0);
}

.oemImageSwiper {
    /* max-height: 500px; */
}

.oemImageSwiper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.oem-slider-title {
    color: var(--text-white);
}

.oem-slider-list,
.oem-slider-description {
    color: var(--text-muted-2);
}

.oem-list {
    border-bottom: 1px solid var(--border-blue-varient);
}

.oem-list li {
    line-height: 2.5;
}

.oem-list li img {
    width: 13px;
    height: 13px;
}

.oem-nav {
    right: 0px;
    bottom: 10%;
    width: 120px;
    background-color: var(--primary-color);
}

.oem-nav .swiper-prev,
.oem-nav .swiper-nxt {
    color: var(--text-white);
    background-color: rgba(255, 255, 255, 0.322);
}

.oem-nav .swiper-prev:hover,
.oem-nav .swiper-nxt:hover {
    color: var(--primary-color);
    background-color: var(--btn-white);
}

.oem-nav .swiper-prev,
.oem-nav .swiper-nxt {
    color: var(--text-white);
    background-color: rgba(255, 255, 255, 0.322);
}

/* --------- OEM section end --------- */

/* --------- Roadmap section start --------- */
.roadmap .swiper {
    height: 370px;
}

.roadmap-swiper {
    position: relative;
}

.roadmap-swiper::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 35%;
    border-top: 1px solid transparent;
    border-image: repeating-linear-gradient(to right,
            var(--text-muted-2) 0 10px,
            transparent 10px 20px) 1;
    z-index: 1;
}

.roadmap-imag-wraper {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    overflow: hidden;
}

.roadmap-imag-wraper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.roadmap-content {
    width: 200px;
}

.roadmap-content h4 {
    color: var(--text-dark);
    font-weight: 700;
    line-height: 42px;
}

.roadmap-content p {
    color: var(--text-para);
    font-weight: 500;
}

/* --------- Roadmap section end --------- */

/* --------- About-CTA section start --------- */
.about-cta {
    position: relative;
    overflow: hidden;
}

.about-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    transform: scaleX(-1);
    background-image: url("../images/aboutus-image/our-features.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.about-cta-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(16, 83, 155, 0.95);
    z-index: 1;
    pointer-events: none;
}

.about-cta .container-xxl {
    position: relative;
    z-index: 2;
}

.about-cta-content h2 {
    color: var(--text-white);
}

.about-cta-content p {
    color: var(--text-muted-2);
}

.about-cta-img-wrapper {
    max-width: 450px;
    max-height: 240px;
    overflow: hidden;
    -webkit-box-reflect: below 10px linear-gradient(transparent, rgba(0, 0, 0, 0.1));
}

.about-cta-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.about-cta .blue-btn {
    background-color: var(--btn-white);
    color: var(--primary-color);
    font-weight: bold;
    font-size: 14px;
    padding: 10px 40px 10px 30px;
}

.about-cta .arrow {
    stroke: var(--primary-color);
}

.about-cta .arrow {
    left: 15px;
    top: -4px;
}

/* --------- About-CTA section end --------- */

/* --------- Our-features section start --------- */
.our-features .why-us-card {
    background-color: var(--secondary-color);
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.our-features .why-us-card h1 {
    font-size: 36px;
}

.our-features-regulus {
    height: 150px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.our-features:hover .our-features-regulus {
    opacity: 0.3;
}

.our-features-regulus img {
    width: 100%;
    height: 100%;
}

/* --------- Our-features section end --------- */

/* =========== MY WISHLIST ============ */
.my-whish-header {
    background-color: var(--primary-color);
}

.my-whish-title {
    color: var(--text-white);
    font-weight: bold;
    margin-bottom: 0;
    text-align: center;
}

.my-whish-content {
    border: 1px solid var(--border-blue);
    overflow: hidden;
}

.my-whish-content .row {
    border-bottom: 1px solid var(--border-blue);
}

.my-whish-content .row:last-child {
    border-bottom: none;
}

.my-Whishlist-image.boQ-product-image {
    max-width: 130px;
    max-height: 120px;
    padding: 10px;
    border: 1px solid var(--border-blue);
}

.my-whish-vendor .boQ-vendor-logo {
    width: 50px;
    height: 50px;
    padding: 7px;
    background-color: var(--text-white);
}

.my-whish-subtotal h5 {
    color: var(--text-dark);
}

.my-whish-cart .nav-button a {
    border: 1px solid var(--text-muted-2);
}

.my-whish-qty,
.my-whish-vendor,
.my-whish-subtotal,
.my-whish-cart {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* button style */
.my-wishlist .modal .red-outline-btn,
.my-whishlist-btn .red-outline-btn {
    border: 1px solid var(--border-red-outline);
    background-color: var(--btn-secondary-soft);
}

.my-wishlist .modal button {
    width: clamp(100px, 25vw, 110px);
}

/* ============ REGISTER SCREEN ============ */
.register-heading {
    max-width: 550px;
    text-align: center;
    margin: 0 auto;
}

.heading-title {
    color: var(--primary-color);
    font-weight: bold;
}

.heading-sub-title {
    color: var(--text-dark);
    font-weight: bold;
}

.heading-description {
    font-size: 15px;
    color: var(--text-para);
    font-weight: 500;
}

/* form */
.register-form {
    background-color: var(--secondary-color);
    /* margin-left: clamp(16px, 5vw, 60px);
    margin-right: clamp(16px, 5vw, 60px); */
}

.company-info-form {
    background-color: var(--bg-white);
}

.register-form h5 {
    color: var(--text-dark);
    font-weight: bold;
}

.required {
    color: red;
}

.request-form {
    padding: 20px;
}

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

.form-group {
    margin-bottom: 16px;
}

.form-label {
    color: var(--text-dark);
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
}

input[type="number"] {
    width: 100%;
    height: 45px;
    padding: 0 20px;
    border-radius: 0px 8px 8px 0px;
    border: 1px solid var(--border-blue);
    outline: none;
}

.country-code {
    width: 80px;
    height: 45px;
    padding: 0 5px;
    border-radius: 8px 0 0 8px !important;
    /* border: 1px solid var(--border-blue); */
    outline: none;
    color: var(--text-white) !important;
    background: var(--primary-color);
    cursor: pointer;
}

.country-code option {
    color: var(--text-white) !important;
}

.phone-input::-webkit-outer-spin-button,
.phone-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.phone-input {
    -moz-appearance: textfield;
    border-radius: 0px 8px 8px 0px !important;
}

input[type="password"],
.request-form input[type="text"],
.company-info-form input[type="text"] {
    width: 100%;
    height: 45px;
    padding: 0 20px;
    border-radius: 8px;
    border: 1px solid var(--border-blue);
    outline: none;
}

input[type="password"]::placeholder,
.request-form input[type="text"]::placeholder,
.company-info-form input[type="text"]::placeholder {
    font-size: 14px;
    font-weight: 500;
}

input[type="password"]:focus,
.request-form input[type="text"]:focus,
.company-info-form input[type="text"]:focus {
    border-color: var(--primary-color);
    box-shadow: none;
}

.product-select .dropdown-menu {
    border-radius: 8px;
    box-shadow: none !important;
}

.product-select .form-control {
    width: 100%;
    height: 45px;
    border-radius: 8px;
    font-size: 14px;
    color: var(--text-para);
    padding-left: 20px;
    border: 1px solid var(--border-blue);
}

.product-select .form-control:focus {
    box-shadow: none !important;
}

.product-select .custom-arrow {
    display: inline-block;
    margin-left: 6px;
    margin-bottom: 4px;
    width: 9px;
    height: 9px;
    border-right: 1px solid var(--text-para);
    border-bottom: 1px solid var(--text-para);
}

.selected-products {
    height: 120px;
    width: 100%;
    border-radius: 8px;
    border: 1px solid var(--border-blue);
}

.selected-info {
    color: var(--text-para);
}

.company-info-form .search-input {
    font-size: 14px;
    color: var(--text-para);
}

.input-prefix-wrapper {
    position: relative;
    width: 100%;
}

.input-prefix {
    position: absolute;
    top: 50%;
    left: 1px;
    padding: 11px 10px 11px;
    transform: translateY(-50%);
    color: var(--text-white);
    background-color: var(--primary-color);
    font-weight: 600;
    font-size: 14px;
    pointer-events: none;
}

.input-prefix-wrapper input[type="text"] {
    padding-left: 10%;
}

/* register-btn */
.register-btn .primary-button {
    width: 400px;
    height: 45px;
    /* padding: 12px 100px; */
}

/* terms-and-condition */
.terms-and-condition a {
    color: var(--text-para);
}

.terms-and-condition a span {
    color: var(--primary-color);
    text-decoration: underline;
}

.terms-and-condition .check-label {
    gap: 5px;
    user-select: none;
}

.terms-and-condition .check-label span {
    color: var(--primary-color);
}

.terms-and-condition .check-label input {
    width: 18px;
    height: 18px;
}

/* selecting products */
.selected-tag {
    background: var(--primary-color);
    color: #fff;
    margin: 8px 5px 8px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.selected-tag span {
    cursor: pointer;
    font-weight: bold;
}

/* Register-toast */
.toast {
    background-color: var(--scs-green) !important;
    width: 410px;
}

.toast-container {
    margin-top: 3%;
}

.toast-icon img {
    width: 48px;
    height: 48px;
}

.toast-body h5,
.toast-body p {
    color: var(--text-white);
}

/*============ LOGIN SCREEN =============== */
.login-form {
    /* width: clamp(320px, 60vw, 700px); */
    background-color: var(--secondary-color);
    margin: 0 auto;
}

/* login btn */
#setNewPasswordBtn,
#verify-Btn,
#forgot-password-btn,
#loginBtn {
    width: 100%;
    height: 45px;
}

.register-now p {
    color: var(--text-para);
}

.eyetoggle {
    position: absolute;
    top: 70%;
    right: 14px;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--text-muted);
}

.eyetoggle:hover {
    color: var(--primary-color);
}

/*========== FORGOT PASSWORD SCREEN ========= */
.Back-to-login a {
    color: var(--text-para);
    font-weight: 500;
}

.Back-to-login img {
    width: 15px;
    height: 12px;
}

/* ===== Verify Email VERIFY EMAIL SCREEN ===== */
.edit-email p {
    font-weight: 700;
    color: var(--text-para);
    margin-bottom: 0px;
}

.edit-email a {
    color: #10539b;
}

.edit-email img {
    width: 15px;
    height: 15px;
}

.otp-form-group input[type="text"] {
    background-color: transparent;
    border: 1px solid #6767677a;
    border-radius: 30px;
}

.otp-input.correct {
    border-color: #28a745 !important;
}

.otp-input.wrong {
    border-color: #dc3545 !important;
}

/* =========== TERMS AND CONDITIONS =========== */
.policy-title {
    color: var(--text-dark);
    font-weight: 700;
}

.address-header h5,
.terms-and-conditions-content h5 {
    color: var(--text-dark);
    font-weight: 700;
}

.address-header p,
.terms-and-conditions-content p,
.terms-and-conditions-content ul li {
    font-size: 14px;
    color: var(--text-para);
    font-weight: 500;
}

.terms-and-conditions-content ul li {
    list-style-type: disc;
    line-height: 1.5;
}

.terms-and-conditions-content ul li::marker {
    font-size: 1.4em;
    color: var(--cta-red-color);
}

.terms-and-condition-update {
    width: fit-content;
    height: fit-content;
}

.terms-and-condition-update {
    color: var(--text-dark);
    font-weight: 700;
    background-color: #fafafb;
}

.terms-and-condition-right {
    background-color: #fafafb;
    position: sticky;
    top: 150px;
}

.address-body {
    background-color: var(--bg-white);
}

/* .address-body img {
    width: 18px;
    height: 18px;
} */

.terms-and-condition-right .address-body h6 {
    color: var(--text-dark);
    font-weight: 700;
}

.terms-and-condition-right .address-body p {
    color: var(--text-para);
    font-weight: 500;
}

/* ========== ACCOUNT PROFILE =========== */
.account-profile {
    background-color: #f3f6fa;
}

.profile-dashboard-left {
    background-color: var(--bg-white);
}

.profile-dashboard-left h6 {
    color: var(--primary-color);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2;
}

/* btn style */
.profile-button.footer-button a {
    background-color: var(--secondary-color);
    color: var(--primary-color);
    width: 35px;
    height: 35px;
    transition: all 0.3s ease;
}

.profile-button.footer-button a svg {
    stroke: var(--primary-color);
    transition: stroke 0.3s ease;
}

.profile-dashboard-left ul li:hover .profile-button.footer-button a {
    border: 1px solid var(--btn-primary-bg);
    background-color: var(--btn-primary-bg);
    box-shadow: inset 0 0 0 3px #fff;
    color: var(--btn-white);
}

.profile-dashboard-left ul li:hover .profile-button.footer-button a svg {
    stroke: var(--btn-white);
}

.profile-dashboard-left ul li {
    border-bottom: 1px solid var(--border-blue);
    cursor: pointer;
}

.profile-dashboard-left ul li:last-child {
    border-bottom: none;
}

.profile-button p {
    color: var(--text-dark);
    font-weight: 500;
    transition: color 0.3s ease;
}

/* Tab Active */
.profile-button.footer-button.nav-link.active svg {
    stroke: var(--btn-white);
}

.profile-button.footer-button.nav-link.active a {
    border: 1px solid var(--btn-primary-bg);
    background-color: var(--btn-primary-bg);
    box-shadow: inset 0 0 0 3px white;
    color: var(--btn-white);
}

.profile-button.footer-button.nav-link.active span,
.profile-button.footer-button.nav-link.active p {
    color: var(--primary-color);
}

/* profile dashboard right */
.Information {
    background-color: var(--bg-white);
}

.Information-header h5 {
    color: var(--text-dark);
    font-weight: 700;
}

.Information-header {
    border-bottom: 1px solid var(--border-blue);
}

.Information-content-title {
    color: var(--text-para);
    font-weight: 500;
    margin-bottom: 8px;
}

.Information-content-text {
    color: var(--text-dark);
    font-weight: 700;
}

.Information-content-text-link {
    font-weight: 500;
    cursor: pointer;
}

/* toast model */
.place-order-main .modal button,
.place-order-main .form-canvas .primary-button,
.place-order-main .form-canvas .red-outline-btn,
.account-profile .modal button {
    width: clamp(100px, 25vw, 110px);
}

.place-order-main .form-canvas .red-outline-btn,
.place-order-main .red-outline-btn,
.account-profile .red-outline-btn {
    border: 1px solid var(--border-red-outline);
    background-color: var(--btn-secondary-soft);
}

/* address tab content */
.address-card {
    border: 1px solid var(--border-blue);
    transition: all 0.3s ease;
}

.address-card h6 {
    color: var(--text-dark);
    font-weight: 700;
}

.address-card p {
    color: var(--text-para);
    font-size: 14px;
    font-weight: 500;
}

/* active state */
.address-card.active {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.address-card.active h6 {
    color: var(--text-white);
}

.address-card.active p {
    color: rgba(255, 255, 255, 0.7);
}

.Myaddress-content-edit img {
    padding-bottom: 4px;
    cursor: pointer;
}

.Myaddress-content-edit p {
    font-weight: 700;
    margin-bottom: 0px;
    cursor: pointer;
}

.Myaddress-content-edit .edit p {
    color: var(--primary-color);

}

.Myaddress-content-edit .delete p {
    color: var(--cta-red-color);
}

/* address btn style */
.address-card .address-select button {
    color: var(--primary-color);
    font-size: 14px;
    font-weight: 500;
    padding: 3px 5px;
    width: 80px;
    border-radius: 8px;
    background-color: var(--secondary-color);
    border: 1px solid var(--border-blue-varient);
    transition: all 0.3s ease;
}

.address-card.active .address-select button {
    background-color: var(--bg-white);
    color: var(--primary-color);
    border-color: var(--bg-white);
}

.Myaddress-btn button {
    font-weight: 500;
    padding: 7px 20px 7px 20px;
}

/* edit address form */
.edit-address-form .company-info-form {
    background-color: var(--secondary-color);
}

.edit-address-form .form-label {
    font-size: 13px;
}

.edit-address-form input[type="text"] {
    height: 40px;
}

.edit-address-action-btn button {
    width: 120px;
}

/* ============ SELLERS SECTION =============== */

/* ---------- Sellers Banner ------------ */
.seller-banner {
    margin-bottom: 150px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.9) -10%, rgba(16, 83, 155, 0.1) 100%);
}

.seller-header p {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-para);
}

/* seller-banner-left */
.seller-banner-logo {
    width: 500px;
    height: 190px;
    margin: 0 auto;
    transform: translateY(-30px);
    /* position: absolute;
    top: 8%;
    right: 10%; */
}

.seller-banner-logo img {
    width: 100%;
    height: 100%;
}

.seller-banner-features {
    width: 65%;
    right: 5%;
    bottom: -30%;
    background-color: var(--bg-white);
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.seller-banner-features .col-3 {
    border-right: 1px solid var(--border-blue);
}

.seller-banner-features .col-3:last-child {
    border-right: none;
}

.seller-banner-feature-item img {
    width: 50px;
    height: 50px;
}

.seller-banner-feature-item p {
    color: var(--text-dark);
    font-weight: 500;
}

/* --------- Why OEMs Choose Regulus ----------- */
/* Why OEMs Choose left */
.OEM-choose-count h2 {
    color: var(--primary-color);
    font-weight: 700;
    position: relative;
}

.OEM-choose-count h2::before {
    content: "";
    height: 1px;
    width: 20px;
    top: 50%;
    left: -40px;
    background-color: var(--cta-red-color);
    position: absolute;
}

.OEM-choose-count p {
    color: var(--text-para);
    font-weight: 500;
}

/* Why OEMs Choose right */
.seller-why-OEM-choose .swiper {
    width: 100%;
    height: 220px;
}

.OEM-choose-right .why-us-card {
    position: relative;
    overflow: hidden;
    background-color: var(--bg-white);
    height: 100%;
    box-shadow: none;
    border: 1px solid var(--border-blue);
}

.OEM-choose-right .why-us-card:hover img {
    transition: filter 1s ease;
}

/* .OEM-choose-right .why-us-card:hover img {
    filter: brightness(0) invert(1);
}
.OEM-choose-right .whyus-img-overly{
    background-color: var(--primary-color);
} */

/*/* --------- Working Process ----------- */
.working-process-header .section-title {
    margin-top: 0px;
}

.working-process-card-head {
    /* width: 225px; */
    height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background-color: #10539B05;
    border: 1px solid var(--border-blue-varient);
}

.working-process-card-head img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.working-process-card-content h5 {
    color: var(--text-dark);
    font-weight: 700;
}

.working-process-card-content p {
    color: var(--text-para);
    font-weight: 500;
    padding-right: 20px;
}

.working-process-card-line span {
    font-size: 13px;
    color: var(--text-white);
    font-weight: 700;
    background-color: var(--primary-color);
}

/* .working-process-card-line{
    position: relative;
}
.working-process-card-line::before{
    content: "";
    height: 1px;
    width: 100%;
    position: absolute;
    top: 10%;
    background-color: var(--primary-color);
} */
.working-process {
    position: relative;
}

.working-process .row .col {
    position: relative;
    z-index: 1;
}

.working-process .row .col::before {
    content: "";
    position: absolute;
    top: 62%;
    left: 0;
    width: 100%;
    height: 1px;
    border-bottom: 1px dashed #10539b38;
    border-image: repeating-linear-gradient(to right,
            #10539b38 0 10px,
            transparent 10px 20px) 1;
    z-index: -1;
}

/*/* --------- Business Growth ----------- */
.business-growth {
    background-color: var(--secondary-color);
}

.business-growth-left {
    max-height: 100%;
    width: 100%;
}

.business-growth-left img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.business-growth>.row {
    margin-left: 0;
    margin-right: 0;
}

.business-growth-content .why-us-card {
    height: auto;
    box-shadow: none;
}


/*/* --------- Seller-CTA ----------- */
.seller-cta-left {
    height: 100%;
    width: 100%;
}

.seller-cta-left img {
    height: 100%;
    width: 100%;
}

/* seller cta right */
.seller-cta-content {
    position: relative;
    overflow: hidden;
}

.seller-cta-content::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url("../images/sellers-images/business-growth.webp");
    background-repeat: no-repeat;
    background-position: right;
    background-size: cover;
}

.seller-cta-content .row {
    position: relative;
    z-index: 2;
}

/* seller cta btn */
.seller-cta .blue-btn {
    background-color: var(--btn-white);
    color: var(--primary-color);
    font-weight: bold;
    font-size: 14px;
    padding: 10px 30px 10px 20px;
}

.seller-cta .arrow {
    stroke: var(--primary-color);
}

.seller-cta .arrow {
    left: 15px;
    top: -4px;
}
/* .business-growth-card,
.why-us-card {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
} */

/* -------- Client Logo slider -------- */
.seller-logo-slider .section-title {
    font-size: 20px;
    width: fit-content;
    margin: 0 auto;
    background-color: var(--bg-white);
}

.seller-slider-header {
    position: relative;
    z-index: 1;
}

.seller-slider-header::before {
    content: "";
    height: 1px;
    width: 100%;
    top: 50%;
    left: 0px;
    position: absolute;
    background-color: var(--border-blue-varient);
    z-index: -1;
}

.seller-slider {
    margin: auto;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.seller-slide-track {
    width: max-content;
    animation: scroll 30s linear infinite;
}

.seller-logo-slide {
    width: 190px;
    height: 120px;
    padding: 30px;
    border: 1px solid var(--border-blue-varient);
    border-radius: 10px;
    flex-shrink: 0;
}

.seller-logo-slide img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* .seller-slider:hover .seller-slide-track {
  animation-play-state: paused;
} */

/* ============ CONTACT US SECTION =============== */

/* ------- Contact us header --------- */
.contact-us-header.about-header {
    background-image: url("../images/contact-us-image/contact-us-banner.webp");
}

.contact-us-form .address-body {
    background-color: transparent;
}

.contact-us-icon-bg {
    width: 35px;
    height: 35px;
    top: -10%;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--bg-white);
    z-index: -1;
}

.contact-us-address {
    height: 100%;
    background-image: url("../images/contact-us-image/factory-address.webp");
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent;
    position: relative;
    z-index: 0;
}

.contact-us-address-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(16, 83, 155, 0.911);
    z-index: -1;
}

.contact-us-address .address-header h3,
.contact-us-address .address-body h6 {
    color: var(--text-white);
    font-weight: 700;
    z-index: 1;
}

.contact-us-address .address-header p,
.contact-us-address .address-body p {
    color: var(--text-muted-2);
    z-index: 1;
}

.contact-us-content {
    margin: 0 auto;
    /* width: 1100px; */
    background-color: var(--secondary-color);
}

.contact-address-image {
    /* width: 350px; */
    height: 65px;
}

.contact-address-image img {
    width: 100%;
    height: 100%;
    display: flex;
    opacity: 0.3;
    object-fit: contain;
    object-position: center;
    filter: brightness(0) saturate(100%) invert(71%) sepia(92%) saturate(3408%) hue-rotate(188deg) brightness(104%) contrast(101%);
}

/* contact form */
.contact-us-get-in-touch h2 {
    color: var(--text-dark);
    border-bottom: 1px solid var(--border-blue);
}

.contact-us-get-in-touch .request-form {
    padding: 10px 0px 10px;
}

.contact-us-get-in-touch label {
    font-size: 14px;
}

.additional-instructions textarea,
.contact-us-get-in-touch textarea {
    width: 100%;
    padding: 10px 20px;
    border-radius: 8px;
    border: 1px solid var(--border-blue);
    outline: none;
    resize: none;
}

.contact-us-get-in-touch textarea:focus {
    border: 1px solid var(--primary-color);
}

.Submit-btn button {
    padding: 10px 50px 10px;
}

.contact-us-get-in-touch .dropdown-item:hover {
    color: var(--primary-color);
    background-color: transparent;
}

.contact-us-get-in-touch .dropdown-toggle {
    height: 42px;
    margin-top: 8px;
    color: #777676;
    background-color: var(--bg-white);
}

.contact-us-get-in-touch .custom-arrow {
    border-right: 1px solid #777676;
    border-bottom: 1px solid #777676;
}

iframe {
    width: 100%;
    height: 80dvh;
}


/* ============ HELP AND SUPPORT SECTION =============== */
/* ------- help-and-support header --------- */
.help-and-support-header.contact-us-header {
    background-image: url("../images/help-and-support-image/help-and-support.webp");
}

/* ------- Industrial Support Services header --------- */
.support-services-left {
    background-color: var(--secondary-color);
}

.support-services-left .address-body {
    background-color: transparent;
}

.support-services-head h3 {
    color: var(--primary-color);
    font-weight: 700;
}

.support-services-head p {
    color: var(--text-dark);
    font-weight: 500;
}

.support-services-left .address-body img {
    width: 30px;
    height: 30px;
}

.support-address-card {
    height: 100%;
    background-color: var(--bg-white);
}

.support-address-card h6 {
    color: var(--text-dark);
    font-weight: 700;
}

.support-address-card p {
    color: var(--text-para);
    font-weight: 500;
}

.support-services-right-card {
    height: 100%;
    color: var(--text-white);
    background-image: url("../images/help-and-support-image/factory-address.webp");
    background-position: center;
    background-size: cover;
    z-index: 0;
}

.support-services-card-overlay {
    inset: 0;
    background: linear-gradient(180deg,
            rgba(14, 14, 14, 0) 10%,
            rgb(16, 83, 155) 100%);
    z-index: -1;
}

.support-services-right-card h3 {
    font-weight: 700;
}

.support-services-right-card p {}

/* slider animation */
.support-address-card {
    position: relative;
    overflow: hidden;
    background: #ffffff;
    transition: color 0.3s ease;
    cursor: pointer;
}

.support-address-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--primary-color);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.45s ease;
    z-index: 0;
}

.support-address-card:hover::before {
    transform: scaleX(1);
    transform-origin: left;
}

.support-address-card:not(:hover)::before {
    transform-origin: right;
}

.support-address-card>* {
    position: relative;
    z-index: 1;
}

.support-address-card:hover h6,
.support-address-card:hover p {
    color: #fff;
}

.support-address-card img {
    transition: filter 0.3s ease;
}

.support-address-card:hover img {
    filter: brightness(0) invert(1);
}

/* ------- Industrial Support Services Section --------- */
.industrial-support-services {
    background-color: var(--secondary-color);
}

.industrial-support-services h3 {
    color: var(--text-dark);
    font-weight: 700;
}

.industrial-support-services-nav button {
    border: none !important;
    background: transparent;
}

.industrial-support-services-nav {
    background-color: var(--bg-white);
}

.industrial-support-services-nav .nav-link:hover {
    color: var(--primary-color);
}

.industrial-support-services-nav li button {
    font-size: 16px;
    color: var(--text-para);
    font-weight: 500;
    width: 100%;
    text-align: left;
    padding: 10px 14px;
}

.industrial-support-services-nav .nav-item:has(.nav-link.active) {
    background-color: var(--primary-color);
}

.industrial-support-services-nav .nav-item:has(.nav-link.active) button {
    color: var(--text-white);
    background-color: transparent;
}

.industrial-support-services-tab {
    background-color: var(--bg-white);
}

.industrial-support-services-header {
    color: var(--text-dark);
    font-weight: 700;
    border-bottom: 1px solid var(--border-blue);
}

.industrial-support-services-content img {
    width: 13px;
    height: 13px;
    margin-top: 5px;
}

.industrial-support-services-content p {
    color: var(--text-dark);
    font-weight: 500;
}

.industrial-support-services-content p span {
    color: var(--text-para);
}

/* ------- Industrial Support FAQ Section --------- */
.faq-image {
    width: 100%;
    height: 80dvh;
    overflow: hidden;
}

.faq-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.faq-section {
    background-color: var(--bg-white);
}

/* accordion card */
.faq-accordion .accordion-item {
    border: 1px solid var(--border-blue);
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
}

.faq-accordion .accordion-item.active {
    background-color: var(--primary-color);
    transition: all 0.4s ease;
}

.faq-accordion .accordion-button {
    font-weight: 500;
    font-size: 16px;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    background-color: transparent;
    box-shadow: none;
}

.faq-icon {
    font-size: 20px;
    font-weight: 700;
    transition: transform 0.3s ease;
    color: var(--text-white);
    padding: 5px 10px 5px;
    border-radius: 50px;
    background-color: var(--primary-color);
}

.faq-accordion .accordion-item.active .faq-icon {
    color: var(--primary-color);
    padding: 5px 10px 5px;
    border-radius: 50px;
    background-color: var(--bg-white);
}

.faq-accordion .accordion-button {
    color: var(--text-dark);
    font-weight: 700;
}

.faq-accordion .accordion-item.active .accordion-button {
    color: var(--text-white);
}

.faq-accordion .accordion-body {
    font-size: 14px;
    line-height: 1.6;
    padding: 0px 15px 15px;
}

.faq-accordion .accordion-item.active .accordion-body {
    color: var(--bg-white);
}

/* ============ PLACE ORDER SECTION =============== */
.place-order-main-header p {
    font-size: 13px;
    width: fit-content;
    color: var(--primary-color);
    background-color: var(--border-blue);
    border: 1px solid var(--border-blue-varient);
}

/* place order card */
.place-order-cards {
    border: 1px solid var(--border-blue);
}

.place-order-card-vendor {
    width: 20px;
    height: 20px;
}

.place-order-card-vendor img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.place-order-vendor-info h6 {
    color: var(--text-dark);
    font-weight: 700;
    margin-bottom: 0;
}

.place-order-vendor-loaction {
    width: 14px;
    height: 14px;
}

.place-order-vendor-loaction img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.place-order-headertotal p {
    color: var(--text-dark);
    font-weight: 500;
    margin-bottom: 0;
}

.place-order-headertotal p span {
    color: var(--primary-color);
    font-weight: 500;
}

.place-order-main-title {
    color: var(--text-white);
    font-weight: 500;
    background-color: var(--primary-color);
}

.place-card-product-img {
    width: 50px;
    height: 50px;
}

.place-card-product-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.place-card-product-name {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 3px;
    color: var(--text-dark);
}

.place-card-product-subname {
    margin-bottom: 0px;
    color: var(--text-para);
    font-weight: 500;
}

.place-order-card-content .qty-counter {
    width: 130px !important;
    border: 1px solid var(--text-muted-2);
    overflow: hidden;
}

.place-order-card .row {
    border-bottom: 1px solid var(--border-blue-varient);
}

.place-order-card .row:last-child {
    border-bottom: none;
}

.place-order-card-footer {
    background-color: var(--secondary-color);
}

.place-order-card-footer .row .col-4 {
    border-right: 1px solid var(--text-muted-2);
}

.place-order-card-footer .row .col-4:last-child {
    border-right: none;
}

.place-order-footer-info h6 {
    font-size: 15px;
    color: var(--text-dark);
    font-weight: 700;
}

.custom-radio {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    position: relative;
}

.custom-radio input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Outer circle */
.radio-mark {
    width: 16px;
    height: 16px;
    border: 1px solid var(--text-soft-muted);
    border-radius: 50%;
    display: inline-block;
    position: relative;
    transition: 0.3s;
}

/* Inner dot */
.radio-mark::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--primary-color);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: 0.3s;
}

.custom-radio input:checked+.radio-mark {
    border-color: var(--primary-color);
}

.custom-radio input:checked+.radio-mark::after {
    transform: translate(-50%, -50%) scale(1);
}

.place-order-footer-address,
.custom-radio-label {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
}

.custom-radio-label span {
    color: var(--primary-color);
    font-weight: 500;
}

.place-order-footer-contact p,
.place-order-footer-contact a {
    color: var(--primary-color);
    margin-bottom: 0;
}

.place-order-main .boQ-summary-card {
    padding: 15px !important;
}

.place-order-main .boQ-summary-footer p {
    color: var(--text-muted-2);
}

.additional-instructions p {
    color: var(--text-para);
    font-weight: 500;
}

.place-order-main .change-address {
    color: var(--primary-color) !important;
}

.place-order-main .form-canvas {
    --bs-offcanvas-width: 50vw;
}

.place-order-main .form-canvas .offcanvas-body {
    padding: 0px;
}

.place-order-main .Address-info {
    display: none;
    border-bottom: 5px solid var(--border-blue-varient);
}

.place-order-main .form-canvas .request-form {
    background-color: var(--secondary-color);
}

.country-code {
    max-width: 140px;
    min-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#set-password-form .form-control {
    padding-right: 70px;
    /* space for both icons */
}

.eyetoggle {
    position: absolute;
    right: 12px;
    bottom: 10px;
    /* ← align to bottom, away from error icon */
    cursor: pointer;
    z-index: 5;
}

.toast-container {
    z-index: 9999;
}

.Back-to-login {
    position: relative;
    z-index: 1;
}

#password.is-invalid {
    background-image: none !important;
    padding-right: 45px !important;
}

#password.is-invalid {
    background-image: none !important;
    padding-right: 45px !important;
}

.eyetoggle {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 10;
    line-height: 1;
    color: #6c757d;
    font-size: 16px;
}

#password.is-invalid,
#password_confirmation.is-invalid {
    background-image: none !important;
    padding-right: 45px !important;
}

/* Eye toggle positioned relative to input-wrapper only */
.eyetoggle {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 10;
    line-height: 1;
    color: #6c757d;
    font-size: 16px;
}

/* table Style */
.product-col {
    width: 230px;
    min-width: 230px;
}
thead th {
    background-color: var(--primary-color) !important;
    color: white !important;
    border: var(--primary-color) !important;
}