/*
Theme Name: PRIMETRADE
Theme URI: https://templatejungle.com/
Author: TemplatesJungle
Author URI: https://templatesjungle.com/
Description: PRIMETRADE is a website template for simple ecommerce websites.
Version: 1.1
*/

/*--------------------------------------------------------------
This is main CSS file that contains custom style rules used in this template
--------------------------------------------------------------*/

/*------------------------------------*\
    Table of contents
\*------------------------------------*/

/*------------------------------------------------

CSS STRUCTURE:
1. VARIABLES

2. GENERAL TYPOGRAPHY
  2.1 General Styles
  2.2 Section Title
  2.3 Buttons

3. CONTENT ELEMENTS
  3.1 Form Control
  3.2 Form Select
  3.3 Table
  3.4 Pagination
  3.5 Slash Divider

4. SITE STRUCTURE
  4.1 Header
  4.2 Billboard
  4.3 Icon Box - Company Services
  4.4 Product
  4.5 Items Listings
  4.6 Testimonial
  4.7 Brands
  4.8 Instagram
  4.9 Footer

5. OTHER PAGES
  5.1 Single Product Page
    - Product Tabs

/*--------------------------------------------------------------
/** 1. VARIABLES
--------------------------------------------------------------*/
/* static/src/css/custom_navbar.css */

:root {
  --accent-color:             #717171;
  --white-color:              #fff;
  --black-color:              #272727;
  --gray-color:               #F3F3F3;
  --gray-color-200:           #E3E3E3;
  --gray-color-300:           #E0E0E0;
  --gray-color-500:           #D0D0D0;
  --gray-color-800:           #3A3A3A;
  --light-gray-color:         #D2D2D2;
  --primary-color:            #161A44;
  --hover-color:              #1C75BC;
  --bs-body-color:            #272727;
  --bs-secondary-color:       rgba(194, 194, 194, 1);
  --bs-secondary-rgb:         220, 220, 220;
  --bs-primary-rgb:           255,101,67;
  --bs-border-color:          #E3E3E3;
  --bs-dropdown-link-active-bg: #F5F5F5;
  --light-color:              #F8F8F8;
  --light-blue-color:         #EDF1F3;
  --navbar-color-color:       #131814;
  --swiper-theme-color:       #4A4A4A;
  --swiper-pagination-color:  #4A4A4A;

  --bs-box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.08);

}

.primetrade-navbar-container .primetrade-navbar-custom .primetrade-navbar-collapse .primetrade-site-navigation .nav-item .nav-link {
  font-size:15px;
  color: var(--primary-color);
  border:1px solid #fff;
}
.primetrade-navbar-container .primetrade-navbar-custom .primetrade-navbar-collapse .primetrade-site-navigation .nav-item .nav-link:hover {

  border:1px solid var(--primary-color);
}

/* Change color and border on hover */

/* nav and sidebar ---------------------------------------------------------------------------------------------- */

/* on mobile devices below 600px
 */
@media screen and (max-width: 600px) {
    :root {
      --header-height : 100px;
      --header-height-min   : 80px;
    }
}

/* Fonts */
:root {
    --body-font: "Futura", sans-serif;
    --heading-font: "Futura", sans-serif;
}

@media (min-width: 1850px){
  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1540px;
  }
}

/*----------------------------------------------*/
/* 2. GENERAL TYPOGRAPHY */
/*----------------------------------------------*/

/* 2.1 General Styles
/*----------------------------------------------*/
*, *::before, *::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html {
  box-sizing: border-box;
}
body {
  font-family: var(--body-font);


}
p {
  color: var(--black-color);
  letter-spacing: 0.01rem;
  line-height: normal;
}
a {
  color: var(--black-color);
  text-decoration: none;
  transition: 0.3s color ease-out;
}
a.light {
  color: var(--light-color);
}
a:hover {
  text-decoration: none;
  color: var(--hover-color);
}
hr{
  margin: 1.25rem 0;
  color: var(--gray-color-200);
  opacity: 1;
}

/*------------ Background Color -----------*/
.bg-gray {
  background: var(--gray-color);
}
.bg-dark {
  background: var(--black-color);
}
.bg-light {
  background: var(--light-color);
}
.bg-light-gray {
  background: #F5F5F5;
}

/* - Section Padding
--------------------------------------------------------------*/
.padding-xsmall {
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}
.padding-small {
  padding-top: 2em;
  padding-bottom: 2em;
}
.padding-medium {
  padding-top: 4em;
  padding-bottom: 4em;
}
.padding-large {
  padding-top: 7em;
  padding-bottom: 7em;
}
.padding-xlarge {
  padding-top: 9.5em;
  padding-bottom: 9.5em;
}

/* - Section margin
--------------------------------------------------------------*/
.margin-small {
  margin-top: 2em;
  margin-bottom: 2em;
}
.margin-medium {
  margin-top: 4em;
  margin-bottom: 4em;
}
.margin-large {
  margin-top: 7em;
  margin-bottom: 7em;
}
.margin-xlarge {
  margin-top: 9.5em;
  margin-bottom: 9.5em;
}

/* 2.2 Section Title
/*----------------------------------------------*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--heading-font);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 200;
  line-height: 115%;
}
h4,
h5,
h6 {
  color: var(--light-black-color);
}


.section-title h3{
  width: max-content;
}


@media only screen and (max-width: 450px) {
.btn_class {
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--white-color);
  background-color: var(--primary-color);
  border: none;
  padding: 0.4rem 0.725rem;
  font-size: 1rem;
  border-radius: 10px;
  cursor: pointer;
}
  .section-title h3{
    width: auto;
  }
  .section-title h3::after{
    display: none;
  }
  #items-listing .section-title h3::after,
  aside .sidebar .section-title h3::after{
    display: flex;
    flex-direction: column;
  }
}

#items-listing .section-title h3::after{
  margin-top: 20px;
}
#items-listing .section-title h3::after,
aside .sidebar .section-title h3::after{
  margin-left: 0;
}


/*--------------------------------------------------------------
/** 2.3 Buttons
--------------------------------------------------------------*/
.btn_class {
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--white-color);
  background-color: var(--primary-color) !important;
  border: none;
  padding: 1.11rem 2.425rem;
  font-size: 1rem;
  border-radius: 10px;
  cursor: pointer;
}
.btn_class:hover,
.btn_class:focus-visible,
.btn_class-check:checked+.btn_class, .btn_class.active, .btn_class.show, .btn_class:first-child:active, :not(.btn_class-check)+.btn_class:active {
  color: var(--white-color);
  background-color: var(--hover-color);
}
.btn_class_collapse {
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--white-color);
  background-color: var(--primary-color);
  border: none;
  padding: 0.71rem 1.225rem;
  font-size: 1rem;
  border-radius: 10px;
  cursor: pointer;
}
.btn_class_collapse:hover,
.btn_class_collapse:focus-visible,
.btn_class_collapse-check:checked+.btn_class_collapse, .btn_class_collapse.active, .btn_class_collapse.show, .btn_class_collapse:first-child:active, :not(.btn_class_collapse-check)+.btn_class_collapse:active {
  color: var(--white-color);
  background-color: var(--hover-color);
}

.o_wsale_product_btn a:hover,
.o_wsale_product_btn a:focus-visible,
.o_wsale_product_btn a-check:checked+.o_wsale_product_btn a, .o_wsale_product_btn a.active, .o_wsale_product_btn a.show, .o_wsale_product_btn a:first-child:active, :not(.o_wsale_product_btn a-check)+.o_wsale_product_btn a:active {
  color: var(--white-color);
  background-color: var(--hover-color);
}

.o_wsale_product_btn button:hover,
.o_wsale_product_btn button:focus-visible,
.o_wsale_product_btn button-check:checked+.o_wsale_product_btn button, .o_wsale_product_btn button.active, .o_wsale_product_btn button.show, .o_wsale_product_btn button:first-child:active, :not(.o_wsale_product_btn button-check)+.o_wsale_product_btn button:active {
  background-color: var(--hover-color) !important;
  color: white;
}


/*--------------------------------------------------------------*/
.product_reviews {
  font-weight: 400;
  letter-spacing: 0.09em;
  color: var(--white-color);
  background-color: var(--primary-color);
  padding: 1.125rem 2.625rem;
  border-radius: 5px;
}
.product_reviews:hover,
.product_reviews:focus-visible,
.product_reviews-check:checked+.product_reviews, .product_reviews.active, .product_reviews.show, .product_reviews:first-child:active, :not(.product_reviews-check)+.product_reviews:active {
  color: var(--white-color);
  background-color: var(--hover-color);
}


.btn-dark {
  background-color: var(--black-color);
}
.btn-dark:hover {
  background-color: var(--hover-color);
}

/*--------------------------------------------------------------
/** 3. CONTENT ELEMENTS
--------------------------------------------------------------*/

/*--------------------------------------------------------------
/** 3.1 Form Control
--------------------------------------------------------------*/
.form-control {
  padding: 1rem;
  font-size: 21px;
  font-weight: 200;
  letter-spacing: 0.01rem;
  line-height: normal;
}
.form-control:focus {
  box-shadow: none;
  border-color: #131814;
}
input.form-control::placeholder,
textarea.form-control::placeholder {
  color: var(--black-color);
}

/*--------------------------------------------------------------
/** 3.2 Form Select
--------------------------------------------------------------*/
.filter-blog .form-select,
.filter-shop .form-select{
  padding: 0;
  font-size: 21px;
  font-weight: 200;
  border: none;
  background-color: transparent;
  line-height: normal;
  width: 180px;
}
.form-select:focus {
  box-shadow: none;
}

.form-check-input:checked {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}
.form-check-input:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 0.25rem rgba(243, 141, 68, 0.25);
}

/*--------------------------------------------------------------
/** 3.3 Table
--------------------------------------------------------------*/
th{
  font-weight: 200;
  letter-spacing: 0.06rem;
}

/*--------------------------------------------------------------
/** 3.4 Pagination
--------------------------------------------------------------*/
.page-link {
  padding: 0;
  font-size: 21px;
  color: var(--black-color);
  background: none;
  border: none;
}
.page-link:focus {
  color: var(--primary-color);
  background: none;
  box-shadow: none;
}
.page-link:hover {
  color: var(--primary-color);
  background: none;
  border: none;
}
.active>.page-link, .page-link.active {
  color: var(--primary-color);
  background: none;
  border: none;
}
.disabled>.page-link, .page-link.disabled {
  color: var(--gray-color-500);
  background: none;
  border: none;
}

/*--------------------------------------------------------------
/** 3.5 Slash Divider
--------------------------------------------------------------*/
.slash-divider{
  overflow: hidden;
}

/* Animation */
@media (min-width: 200px) {
  .animate {
    animation-duration: 0.3s;
    -webkit-animation-duration: 0.3s;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
  }
}

/* Animate Slide */
@keyframes slide {
  0% {
    transform: translateY(1rem);
    opacity: 0;
  }
  100% {
    transform: translateY(0rem);
    opacity: 1;
  }
  0% {
    transform: translateY(1rem);
    opacity: 0;
  }
}

@-webkit-keyframes slide {
  0% {
    -webkit-transform: transform;
    -webkit-opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    -webkit-opacity: 1;
  }
  0% {
    -webkit-transform: translateY(1rem);
    -webkit-opacity: 0;
  }
}

.slide {
  -webkit-animation-name: slide;
  animation-name: slide;
}

.dropdown .dropdown-toggle:hover,
.dropdown .dropdown-toggle:focus-visible,
.dropdown .dropdown-toggle-check:checked+.dropdown .dropdown-toggle, .dropdown .dropdown-toggle.active, .dropdown .dropdown-toggle.show, .dropdown .dropdown-toggle:first-child:active, :not(.dropdown .dropdown-toggle-check)+.dropdown .dropdown-toggle:active {
  color: var(--white-color);
  background-color: var(--hover-color);
}
.dropdown .dropdown-toggle{
font-weight: 200;
  text-transform: uppercase;
  color: var(--white-color);
  background-color: var(--primary-color);
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.o_pricelist_dropdown.dropdown .dropdown-toggle:hover,
.o_pricelist_dropdown.dropdown .dropdown-toggle:focus-visible,
.o_pricelist_dropdown.dropdown .dropdown-toggle-check:checked+.o_pricelist_dropdown.dropdown .dropdown-toggle, .o_pricelist_dropdown.dropdown .dropdown-toggle.active, .o_pricelist_dropdown.dropdown .dropdown-toggle.show, .o_pricelist_dropdown.dropdown .dropdown-toggle:first-child:active, :not(.o_pricelist_dropdown.dropdown .dropdown-toggle-check)+.o_pricelist_dropdown.dropdown .dropdown-toggle:active {
  color: var(--white-color);
  background-color: var(--hover-color);
}
.o_pricelist_dropdown.dropdown .dropdown-toggle{
font-weight: 200;
  text-transform: uppercase;
  color: var(--white-color);
  background-color: var(--primary-color);
  border: none;
  border-radius: 5px;
  cursor: pointer;
  padding:17px;
}



li.o_no_autohide_item a.btn.btn-outline-secondary:hover,
li.o_no_autohide_item a.btn.btn-outline-secondary:focus-visible,
li.o_no_autohide_item a.btn.btn-outline-secondary-check:checked+li.o_no_autohide_item a.btn.btn-outline-secondary, li.o_no_autohide_item a.btn.btn-outline-secondary.active, li.o_no_autohide_item a.btn.btn-outline-secondary.show, li.o_no_autohide_item a.btn.btn-outline-secondary:first-child:active, :not(li.o_no_autohide_item a.btn.btn-outline-secondary-check)+li.o_no_autohide_item a.btn.btn-outline-secondary:active {
  color: var(--white-color);
  background-color: var(--hover-color);
}
li.o_no_autohide_item a.btn.btn-outline-secondary{
font-weight: 400;
  text-transform: uppercase;
  color: var(--white-color);
  background-color: var(--primary-color);
  border: none;
  border-radius: 5px;
  cursor: pointer;
  padding:17px;
}

.btn-secondary{
font-weight: 400;
  text-transform: uppercase;
  color: var(--white-color);
  background-color: var(--primary-color);
  border: none;
  border-radius: 5px;
  cursor: pointer;
  padding:17px;
}

.oe_login_form{
padding:0px;
font-size:18px;
width:100%;
}

.o_wsale_my_cart:hover,
.o_wsale_my_cart:focus-visible,
.o_wsale_my_cart-check:checked+.o_wsale_my_cart, .o_wsale_my_cart.active, .o_wsale_my_cart.show, .o_wsale_my_cart:first-child:active, :not(.o_wsale_my_cart-check)+.o_wsale_my_cart:active {
  background-color: var(--hover-color);
}
.o_wsale_my_cart{
font-weight: 200;
  text-transform: uppercase;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  color:white;
}


.o_wsale_my_wish:hover,
.o_wsale_my_wish:focus-visible,
.o_wsale_my_wish-check:checked+.o_wsale_my_wish, .o_wsale_my_wish.active, .o_wsale_my_wish.show, .o_wsale_my_wish:first-child:active, :not(.o_wsale_my_wish-check)+.o_wsale_my_wish:active {
  background-color: var(--hover-color);
}
.o_wsale_my_wish{
font-weight: 200;
  text-transform: uppercase;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  color:white;
}

.btn-secondary.o_wish_add:hover,
.btn-secondary.o_wish_add:focus-visible,
.btn-secondary.o_wish_add-check:checked+.btn-secondary.o_wish_add, .btn-secondary.o_wish_add.active, .btn-secondary.o_wish_add.show, .btn-secondary.o_wish_add:first-child:active, :not(.btn-secondary.o_wish_add-check)+.btn-secondary.o_wish_add:active {
color: var(--white-color);
  background-color: var(--hover-color);}
.btn-secondary.o_wish_add{
font-weight: 350;
  text-transform: uppercase;
  color: var(--white-color);
  background-color: var(--hover-color);
  border: none;
  border-radius: 10px;
  cursor: pointer;

}
.o_portal_details button{
 font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--white-color);
  background-color: var(--primary-color);
  border: none;
  padding: 17px;
  cursor: pointer;
  }
.o_portal_details button:hover,
.o_portal_details button:focus-visible,
.o_portal_details button-check:checked+.o_portal_details button, .o_portal_details button.active, .o_portal_details button.show, .o_portal_details button:first-child:active, :not(.o_portal_details button-check)+.o_portal_details button:active {
  color: var(--white-color);
  background-color: var(--hover-color);
}
.o_portal_details a:hover,
.o_portal_details a:focus-visible,
.o_portal_details a-check:checked+.o_portal_details a, .o_portal_details a.active, .o_portal_details a.show, .o_portal_details a:first-child:active, :not(.o_portal_details a-check)+.o_portal_details a:active {
  color: var(--white-color);
  background-color: var(--hover-color);
}

a.btn.btn-primary[name="website_sale_main_button"]:hover,
a.btn.btn-primary[name="website_sale_main_button"]:focus-visible,
a.btn.btn-primary[name="website_sale_main_button"]-check:checked+a.btn.btn-primary[name="website_sale_main_button"], a.btn.btn-primary[name="website_sale_main_button"].active, a.btn.btn-primary[name="website_sale_main_button"].show, a.btn.btn-primary[name="website_sale_main_button"]:first-child:active, :not(a.btn.btn-primary[name="website_sale_main_button"]-check)+a.btn.btn-primary[name="website_sale_main_button"]:active {
  color: var(--white-color);
  background-color: var(--hover-color);
}
a.btn.btn-primary[name="website_sale_main_button"]{
font-weight: 350;
  text-transform: uppercase;
  color: var(--white-color);
  background-color: var(--primary-color);
  border: none;
  border-radius: 5px;
  cursor: pointer;
  padding:10px;

}

.main_border_color:hover,
.main_border_color:focus-visible,
.main_border_color-check:checked+.main_border_color, .main_border_color.active, .main_border_color.show, .main_border_color:first-child:active, :not(.main_border_color-check)+.main_border_color:active {
  border-color: var(--primary-color);
}
.main_border_color{
  border-radius: 5px;

}

.primary_submit:hover,
.primary_submit:focus-visible,
.primary_submit-check:checked+.primary_submit, .primary_submit.active, .primary_submit.show, .primary_submit:first-child:active, :not(.primary_submit-check)+.primary_submit:active {
 color: var(--white-color);
  background-color: var(--hover-color);
  }
.primary_submit{
font-weight: 400;
  text-transform: uppercase;
  color: var(--white-color);
  background-color: var(--primary-color);
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

a.btn.btn-secondary.a-submit:hover,
a.btn.btn-secondary.a-submit:focus-visible,
a.btn.btn-secondary.a-submit-check:checked+a.btn.btn-secondary.a-submit, a.btn.btn-secondary.a-submit.active, a.btn.btn-secondary.a-submit.show, a.btn.btn-secondary.a-submit:first-child:active, :not(a.btn.btn-secondary.a-submit-check)+a.btn.btn-secondary.a-submit:active {
color: var(--white-color);
  background-color: var(--hover-color);}
a.btn.btn-secondary.a-submit{
font-weight: 350;
  text-transform: uppercase;
  color: var(--white-color);
  background-color: var(--primary-color);
  border: none;
  border-radius: 10px;
  cursor: pointer;
padding-top:18px;
}



.pagination .page-item:hover,
.pagination .page-item:focus-visible,
.pagination .page-item-check:checked+.pagination .page-item, .pagination .page-item.active, .pagination .page-item.show, .pagination .page-item:first-child:active, :not(.pagination .page-item-check)+.pagination .page-item:active {
  color: var(--primary-color);
}
.pagination .page-item{
padding:10px;
font-weight: 200;
  text-transform: uppercase;
  border: none;
  border-radius: 20px;
  cursor: pointer;
}
.pagination .page-item .page-link {
padding:10px;

}

header nav{
background-color:var(--primary-color) !important;
}
.navbar-nav li:nth-child(4) i:hover,
.navbar-nav li:nth-child(4) i:focus-visible,
.navbar-nav li:nth-child(4) i-check:checked+.navbar-nav li:nth-child(4) i, .navbar-nav li:nth-child(4) i.active, .navbar-nav li:nth-child(4) i.show, .navbar-nav li:nth-child(4) i:first-child:active, :not(.navbar-nav li:nth-child(4) i-check)+.navbar-nav li:nth-child(4) i:active {
  background-color: var(--hover-color);
}
.navbar-nav li:nth-child(4) i{
font-weight: 200;
  text-transform: uppercase;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  color:white;
}


/*----------------------------------------------*/
/* 4. SITE STRUCTURE */
/*----------------------------------------------*/

/* Preloader */
.preloader-container {
  position: fixed;
  top: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background: var(--white-color);
  z-index: 9999999;
}
.preloader-container.active_new {
  -webkit-transform: translateY(-100vh);
  transform: translateY(-100vh);
  -webkit-transition: ease-in-out 0.5s;
  transition: ease-in-out 0.5s;
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}
.preloader-text {
  top: 45%;
  font-size: 66px;
  height: 500px;
  position: absolute;
  width: 100%;
  margin: auto;
  text-align: center;
}
.preloader-container.active_new .preloader-text{
  display: none;
}

/* Animation for individual letters */
.preloader-text span {
  opacity: 0;
  animation: topToBottom 0.6s forwards;
  transform-origin: center;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeInLetter {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes topToBottom {
  0% {
  transform: translateY(-100%);
}
100% {
  transform: translateY(0);
}
}
@keyframes scaleIn {
  0% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes expandWidth {
  0% {
    width: auto;
  }
  100% {
    width: 100%;

    letter-spacing: 20px;
  }
}

/* Search Bar
------------------------------------------------------------- */
.search-box {
  background: var(--gray-color);
  position: relative;
}
.close-button {
  position: absolute;
  top: 20px;
  right: 120px;
  cursor: pointer;
  z-index: 9;
}
.search-box input.search-input {
  font-size: 1.3em;
  width: 70%;
  height: 30px;
  padding: 25px;
  border-radius: 80px;
  border-color: rgb(0 0 0 / 25%);
  background: transparent;
}
.search-box svg {
  width: 22px;
  height: 22px;
  color: var(--primary-color);
}
.search-box svg.search {
  margin-left: -50px;
}


/** Search Form
--------------------------------------------------------------*/
.search-form input[type="search"].search-field {
  border: none;
  background: #f1f1f1;
  width: 100%;
  border-radius: 50px;
  padding: 10px 40px;
}
.search-form input[type="search"].search-field::focus {
  border-color: #af9aaa;
}
.search-form button {
  position: absolute;
  top: 6px;
  right: 9px;
  background: transparent;
  border: none;
}

/** Search Popup
--------------------------------------------------------------*/
.search-popup {
  background-color: #fff;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  z-index: 999999;
  -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
  -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
  transition: opacity 0.3s 0s, visibility 0s 0.3s;
}
.search-popup.is-visible {
  opacity: 1;
  visibility: visible;
  cursor: -webkit-image-set(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23FFF' d='M20 1l-1-1-9 9-9-9-1 1 9 9-9 9 1 1 9-9 9 9 1-1-9-9'/%3E%3C/svg%3E") 1x, url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23000' d='M20 1l-1-1-9 9-9-9-1 1 9 9-9 9 1 1 9-9 9 9 1-1-9-9'/%3E%3C/svg%3E") 2x), pointer;
  cursor: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23000' d='M20 1l-1-1-9 9-9-9-1 1 9 9-9 9 1 1 9-9 9 9 1-1-9-9'/%3E%3C/svg%3E"), pointer;
  -webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
  -moz-transition: opacity 0.3s 0s, visibility 0s 0s;
  transition: opacity 0.3s 0s, visibility 0s 0s;
}
.search-popup-container {
  background-color: transparent;
  position: relative;
  top: 50%;
  margin: 0 auto;
  padding: 0;
  width: 90%;
  max-width: 800px;
  text-align: center;
  box-shadow: none;
  cursor: default;
  -webkit-transform: translateY(-40px);
  transform: translateY(-40px);
  -webkit-backface-visibility: hidden;
  -webkit-transition-property: -webkit-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.is-visible .search-popup-container {
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.search-popup-form {
  position: relative;
  margin: 0 0 3em 0;
}
.search-popup-form .form-control {
  padding: 0 0 .375em 0;
  font-size: 2em;
}
.search-popup-form #search-popup-submit {
  display: none;
}
.search-popup .search-popup-close {
  display: block;
  position: absolute;
  top: 2em;
  right: 2em;
  margin: -0.5em;
  padding: 0.5em;
  line-height: 0;
}
.search-popup .search-popup-close:hover {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
.search-popup .search-popup-close i {
  display: block;
  position: relative;
  width: 1em;
  height: 1em;
  fill: rgba(0,0,0,0.5);
}
.search-popup .search-popup-close:hover i {
  fill: rgba(0,0,0,1);
}
.search-popup .cat-list-title {
  margin-top: 40px;
  margin-bottom: 10px;
  font-size: 0.6em;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.search-popup .cat-list {
  margin: 0;
  list-style-type: none;
}
.search-popup .cat-list-item {
  display: inline-block;
  margin-bottom: 0;
  letter-spacing: 0.015em;
  font-size: 2em;
}
.search-popup .cat-list-item a {
  position: relative;
}
.search-popup .cat-list-item a::after {
  background: none repeat scroll 0 0 #fff;
  content: "";
  height: 1px;
  border-bottom: 1px solid #ff9697;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 100%;
  width: 100%;
  -webkit-transition: height 0.3s,opacity 0.3s,-webkit-transform 0.3s;
  transition: height 0.3s,opacity 0.3s,transform 0.3s;
  -webkit-transform: translateY(-5px);
  transform: translateY(-5px);
}
.search-popup .cat-list-item a:hover::after {
  height: 1px;
  opacity: 1;
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
}
.search-popup .cat-list-item::after {
  content: "/";
  padding: 0 5px;
  line-height: 1;
  color: rgba(0, 0, 0, 0.5);
  vertical-align: text-top;
}
.search-popup .cat-list-item:last-child::after {
  display: none;
}

@media only screen and (max-width: 991px) {
.primetrade-navbar-container .primetrade-navbar-custom .primetrade-navbar-collapse .primetrade-site-navigation{
    padding:10px;
}
.btn_class {
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--white-color);
  background-color: var(--primary-color);
  border: none;
  padding: .8rem 1.6rem;
  font-size: 1rem;
  border-radius: 10px;
  cursor: pointer;
}
    .preloader-text {
  font-size: 44px;
}
  .search-popup .cat-list-item,
  .search-popup-form .form-control {
    font-size: 1.425em;
  }
}
@media only screen and (max-width: 767px) {
.btn_class {
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--white-color);
  background-color: var(--primary-color);
  border: none;
  padding: 0.6rem 1.125rem;
  font-size: 1rem;
  border-radius: 10px;
  cursor: pointer;
}
.preloader-text {
  font-size: 33px;
}
.search-popup .search-popup-close {
    top: 1em;
    right: 1em;
  }
}
@media only screen and (max-width: 575px) {
.preloader-text {
  font-size: 22px;
}
  .search-popup .cat-list-item,
  .search-popup-form .form-control {
    font-size: 1.125em;
  }
  .search-popup .search-popup-close {
    top: 1em;
    right: 1em;
  }
}

.search-popup input[type="search"] {
  font-size: 24px;
  height: 60px;
  padding: 26px;
}
.search-popup .search-form button {
  top: 12px;
  right: 15px;
}
.search-popup .search-form button svg {
  height: 28px;
  width: 28px;
}

/* nav tabs */
.nav-link{
  color: white;
}
:focus-visible {
  outline: none;
}

/* 4.1 Header
/*----------------------------------------------*/
.site-header {
  width: 100%;
  z-index: 10;
  transition: background 0.3s ease-out;
}
.navbar-toggler svg.navbar-icon {
  width: 50px;
  height: 50px;
}
.navbar-nav .nav-item a.nav-link {
  font-size: 0.7619em;
  font-weight: 300;
  letter-spacing: 0.09em;
  color: white;
  border: 1px solid var(--primary-color);
}

.navbar-nav .nav-item a.nav-link:hover {
    color:white;
    top: 0; /* Align to the top of the link */
    left: 0; /* Align to the left of the link */
    width: 100%; /* Full width of the link */
    height: 100%; /* Full height of the link */
    border: 1px solid #65cbe4; /* White border color */
    box-sizing: border-box; /* Ensure border is included in element's size */
}

.navbar-nav .nav-item a.nav-link.active,
.navbar-nav .nav-item a.nav-link:focus {
  color:white;
}

.modal {
  --bs-modal-zindex: 99999;
}
.modal-dialog {
  max-width: 800px;
  margin: auto;
  height: 100vh;
  display: flex;
  align-items: center;
}


/*------------ Offcanvas -------------- */
#header-nav .navbar-toggler:focus {
  box-shadow: none;
}
#header-nav .offcanvas {
  transition: 0.5s ease-in-out;
}
#header-nav .offcanvas.show {
  z-index: 99999;
}
#header-nav .offcanvas-end {
  width: 500px;
}

/*------------ Top User Icons -----------*/
.site-header .user-items svg {
  width: 27px;
  height: 27px;
  cursor: pointer;
}

@media only screen and (max-width: 991px) {
  #navbar .user-items {
    display: none;
  }
}

/* 4.2 Billboard
/*----------------------------------------------*/
/*------------Swiper Arrow -----------*/
.swiper-next,
.swiper-prev{
  color: var(--black-color);
  z-index: 3;
  display: flex;
}
.swiper-button-disabled{
  color: var(--gray-color-500);
}

@media only screen and (max-width: 765px) {
  section#billboard{
    height: 100vh !important;
  }
}

/* 4.3 Icon Box - Company Services
/*----------------------------------------------*/
.icon-box .icon-box-icon svg {
  width: 33px;
  height: 33px;
  fill: var(--primary-color);
}

@media only screen and (max-width: 991px) {
  #company-services .icon-box {
    flex-wrap: wrap;
  }
}

/* 4.4 Product
/*----------------------------------------------*/
.card-concern{
  text-align: center;
  bottom: 90px;
  display: flex;
  justify-content: center;
  cursor: pointer;
  text-transform: uppercase;
  transition: all 0.3s ease-out;
  opacity: 0;
}
.card-concern .btn_class{
  padding: 1.125rem;
}
.card-concern svg {
  width: 27px;
  height: 27px;
  cursor: pointer;
}
.card:hover .card-concern{
  bottom: 110px;
  opacity: 1;
}

/* 4.5 Items Listings
/*----------------------------------------------*/
#items-listing img{
  max-width: 80px;
  max-height: 90px;
}

/*------------Swiper Pagination -----------*/
.product-store .swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: 35px;
}
.swiper-pagination span.swiper-pagination-bullet {
  width: 15px;
  height: 15px;
}

/* 4.6 Testimonial
/*----------------------------------------------*/
.rating svg.star {
  width: 16px;
  height: 16px;
}

/* 4.7 Brands
/*----------------------------------------------*/
#brands .brand-images img{
  filter: grayscale(100%);
  opacity: 0.5;
  transition: 0.3s ease-in-out;
}
#brands .brand-images a.brand:hover img{
  filter: grayscale(0%);
  opacity: 1;
}

/* 4.8 Instagram
/*----------------------------------------------*/
.instagram-item .icon-overlay {
  top: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: auto;
  color: var(--light-color);
  opacity: 0;
  transition: 0.9s ease-out;
}
.instagram-item:hover .icon-overlay {
  opacity: 1;
}

/* 4.9 Footer
/*----------------------------------------------*/

#footer{
background-color: var(--primary-color);
padding: 60px 0px 40px 0px;
color: white !important;
}
.footer-bottom{
background-color: var(--white-color) !important;
padding: 60px 0px 40px 0px;
color: #000 !important;
}
#footer .menu-list .menu-item a{
  font-size: 0.7619em;
  font-weight: 300;
  letter-spacing: 0.09em;
  color: var(--white-color);
}
#footer .menu-list .menu-item a:hover{
  color: var(--hover-color);
}
.social-links svg {
  width: 20px;
  height: 20px;
  transition: 0.3s ease-in-out;
  color: var(--white-color);
}
.social-links svg:hover {
  color: var(--hover-color);
}
.social-links li {
  padding-right: 30px;
  color: white;
}
.footer-top-area{
color:white !important;
}
#footer.footer-menu{
color: white !important;
}

/*----------------------------------------------*/
/* 5. SITE STRUCTURE */
/*----------------------------------------------*/
/* ----------- Search Bar -----------*/


/* 5.1 Single Product Page
/*----------------------------------------------*/
.product-info del{
  color: var(--gray-color-500);
}

/*---- Product Tabs ----------*/
.nav-tabs .nav-link {
  letter-spacing: 0.06em;
}
.nav-tabs .nav-link {
  background: none;
  border: none;
}
.nav-tabs button.nav-link.active {
  color: var(--primary-color);
  background: none;
}
.nav-tabs button.nav-link:hover {
  color: var(--primary-color);
}


/* Base styles for larger screens */
.col-md-3.text-end {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    width: 100%;
    pointer-events: none; /* Prevents container from blocking carousel controls */
    z-index: 1000; /* Ensure the container is above other elements */
}

.col-md-3.text-end .btn {
    width: 55px;  /* Bigger button size */
    height: 70px;
    padding: 0;
    background-color: var(--primary-color); /* Red background color */
    border-radius: 5px; /* Border radius of 5px */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1010; /* Ensure buttons are above other elements */
    pointer-events: all; /* Ensure buttons are clickable */
}

.col-md-3.text-end .btn i {
    font-size: 18px; /* Bigger icon size */
    color: white; /* Icon color */
}

.col-md-3.text-end .btn:first-child {
    position: absolute;
    left: 15px; /* Adjust position to keep the button inside the screen */
}

.col-md-3.text-end .btn:last-child {
    position: absolute;
    right: 15px; /* Adjust position to keep the button inside the screen */
}

/* Media query for smaller screens */
@media (max-width: 767px) {
    .col-md-3.text-end .btn {
        width: 35px;  /* Adjusted button size for smaller screens */
        height: 35px;
    }

    .col-md-3.text-end .btn i {
        font-size: 16px; /* Adjust icon size for smaller screens */
    }

    .col-md-3.text-end .btn:first-child {
        left: 10px; /* Adjust position to keep the button inside the screen */
    }

    .col-md-3.text-end .btn:last-child {
        right: 10px; /* Adjust position to keep the button inside the screen */
    }
}

/* Media query for very small screens */
@media (max-width: 480px) {
    .col-md-3.text-end .btn {
        width: 30px;  /* Adjusted button size for very small screens */
        height: 30px;
    }

    .col-md-3.text-end .btn i {
        font-size: 14px; /* Adjust icon size for very small screens */
    }

    .col-md-3.text-end .btn:first-child {
        left: 8px; /* Ensure the button is still visible */
    }

    .col-md-3.text-end .btn:last-child {
        right: 8px; /* Ensure the button is still visible */
    }
}

.carousel-inner {
  padding: 2rem;
  margin: auto;
}

.carousel-indicators {
  margin-bottom: 0;
}

.carousel-control-next, .carousel-control-prev {
  width: 2rem;
}


.icon-box {
    text-align: center;
}

.icon-box-icon {
    display: flex;
    justify-content: center;
}

.icon-box-icon svg {
    width: 50px; /* Adjust size as needed */
    height: 50px;
    margin: 0 auto;
}
.add_to_button {
  font-weight: 200;
  text-transform: uppercase;
  color: var(--white-color);
  background-color: var(--primary-color);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  margin:2px;
}



.container_best_selling {
    width: 80%;
    margin: 0 auto;
    position: relative;
}
/* Item styling */



/* Owl Carousel custom navigation buttons */
.owl-carousel .owl-nav {
    position: absolute;
    top: 35%;
    transform: translateY(-35%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 20px; /* Adjust padding as needed */
    z-index: 10;
}

/* Navigation button styling */
.owl-nav button{
    position: absolute;
    height: 70px;
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-color) !important;
    border-radius: 50%;
    opacity: 1;
    box-shadow: -2px 1px 10px var(--primary-color);
    cursor: pointer;
    font-size: 30px; /* Adjust icon size as needed */
    color: #fff !important; /* Icon color */
    padding:15px;
    transition: background 0.3s, color 0.3s;
}

.owl-nav .owl-prev {
    left: -60px; /* Adjust positioning as needed */
}

.owl-nav .owl-next {
    right: -60px; /* Adjust positioning as needed */
}

.owl-nav button:hover {
    background-color: var(--hover-color) !important; /* Hover background color */
    color: #fff !important; /* Hover icon color */
}

/* Responsive styling for smaller screens */
@media (max-width: 767px) {
    .owl-nav button {
        height: 35px; /* Smaller size for mobile screens */
        width: 35px; /* Smaller size for mobile screens */
        font-size: 18px; /* Smaller icon size */
    }

.owl-nav .owl-prev {
    left: -45px; /* Adjust positioning as needed */
}

.owl-nav .owl-next {
    right: -45px; /* Adjust positioning as needed */
}

.rating_car .owl-nav .owl-prev {
    left: 0px !important; /* Adjust positioning as needed */
}

.rating_car .owl-nav .owl-next {
    right: 0px !important; /* Adjust positioning as needed */
}

}
--------------------------------------------------------------*/