.facility-img a img {
  margin: 15px 0;
  height: 200px;
  width: 100%;
  object-fit: cover;
  object-position: center;
}
.tablink {
  background-color: #f6faff;
  /* border: 1px solid #ccc; */
  padding: 10px 20px;
  cursor: pointer;
  color: inherit;
  font-size: 16px;
}

.tablink:hover {
  background-color: rgb(248, 235, 255);
}

.category {
  display: none;
  margin: 20px 0 0px;
  /* height: 100vh; */
  position: relative;
}

.category-head {
  /* position: absolute; */
  /* left: -20.625rem; */
  top: 17%;
  transform: rotate(180deg);
  color: var(--theme-blue);
  padding: 20px;
  border-bottom: 2px solid var(--theme-blue);
  writing-mode: vertical-rl; /* Vertical text writing mode */
  text-orientation: mixed; /* Allows mixed vertical and horizontal characters */
  white-space: nowrap;
}
/* .left-heading {
  position: absolute;
  left: 0;
  top: 0;
  transform: rotate(270deg);
  transform-origin: left top;
  white-space: nowrap;
} */
.category-head1 {
  position: absolute;
  left: -320px;
  top: 18%;
  transform: rotate(270deg);
  color: var(--theme-blue);
  padding: 20px;
  border-right: 2px solid var(--theme-blue);
}
.category-head2 {
  position: absolute;
  left: -270px;
  top: 10%;
  transform: rotate(270deg);
  color: var(--theme-blue);
  padding: 20px;
  border-right: 2px solid var(--theme-blue);
}

.image-container {
  display: flex;
  flex-wrap: wrap;
}
.toggle-selected-bg {
  background-color: red;
}

.tablink.active {
  background-color: #007bff; /* Change to your desired background color */
  color: #fff; /* Change to your desired text color */
}

.side-tab {
  position: sticky;
  top: 100px;
}

.side-tab button {
  border: 0px;
}

.prod-head-bg {
  /* background-image: url(../assets/images/prod1.jpg); */
  height: 300px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom;
  position: relative;
  /* display: grid; */
}
/* .category::before {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  background: rgba(255, 255, 255, 0.6);
} */
.prod-head-bg h1 {
  color: #0000005d;
  z-index: 99;
  position: relative;
}

.each-alphabet-section {
  margin-bottom: 100px;
  position: relative;
  
}
.each-alphabet-section h1 {
  color: var(--theme-blue);
}

.each-alphabet-section::after {
  content: "";
  position: absolute;
  height: 1px;
  width: 100%;
  bottom: -40px;
  background: var(--theme-blue);
  background: linear-gradient(
    to right,
    transparent,
    var(--theme-blue),
    transparent
  );
}

.flag img {
  width: 50px;
}

/* .hidden-tab {
  width: 0;
  padding: 0;
  font-size: 0;
} */

.tablink {
  transition: width 1s ease, font-size 1s ease;
}

/* #button4:hover ~ .hidden-tab {
  width: 200px;
  font-size: 18px;
  pointer-events: auto;
} */

/* .hidden-tab:hover {
  width: 200px;
  font-size: 18px;
}
#button1:hover ~ #button2,
#button1:hover ~ #button3,
#button2:hover ~ #button1,
#button2:hover ~ #button3,
#button3:hover ~ #button1,
#button3:hover ~ #button2 {
  width: 200px !important;
  font-size: 18px !important;
} */

.sticky-tab {
  position: sticky;
  top: 100px;
}

/* .table-container {
  overflow-y: auto;
  overflow-x: hidden;
}
.table-container::-webkit-scrollbar {
  width: 2px;
}

.table-container::-webkit-scrollbar-track {
  background: #ffffff00;
}

.table-container::-webkit-scrollbar-thumb {
  background: var(--theme-blue);
}

.table-container::-webkit-scrollbar-thumb:hover {
  background: #555;
} */

.category2,
.category3 {
  display: none;
}

.table-heading p {
  font-weight: bold;
    margin: 8px 0;
}

.table-heading {
  position: relative;
  /* top: 0px; */
  background-color: rgb(255, 255, 255);
  /* z-index: 1; */
  padding: 12px 0 6px;
    border-bottom: 1px solid #c5c5c5;
}

.pl-5 {
  padding-left: 5px !important;
}

#button-head {
  font-size: 20px;
  font-weight: bold;
}

.flag {
  position: relative;
  display: inline-block;
}

.dialog-box {
  position: absolute;
  top: 0%;
  left: 56px;
  width: auto;
  background-color: #000000;
  color: white;
  border: 1px solid #ccc;
  padding: 0 10px;
  display: none;
  z-index: 1;
  font-size: 14px;
  border-radius: 5px;
}

.hover-image:hover + .dialog-box {
  display: block;
}

/* .overflow-x-hidden {
  overflow-y: hidden !important;
} */

.form-check-input:checked, .form-check-input[type=checkbox]:indeterminate {
    background-color: #834e98 !important;
    border-color: #9C27B0 !important;
}
.form-check-input:focus {
    border-color: rgba(0, 0, 0, .25);
}
.form-check-input:focus { box-shadow: none; }
.search_field  input {
    height: 48px;
    border-radius: 5px;
    margin: 0;
}
.search_field  .theme-btn.dark {
    height: 47px;
    border-radius: 5px;
    padding: 8px 20px;
    width: 100%;
}
.table_listing .row { align-items: center; margin-bottom: 15px; } 
.table_listing .row p { margin-bottom: 0; }
.action .theme-btn { padding: 6px 15px; border-radius: 5px; }


.prd-title { 
    background: #4b1261;
    height:420px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
@media (min-height: 650px) {
    .prd-title { 
        background: #4b1261;
        height:60vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
    } 
}

.applications.table th:first-child { width: 200px; }
.applications.table th:last-child { width: 45%; }
.table-light {
    --bs-table-bg: var(--theme-pink);
    color: #fff;
}
.accordion {
    --bs-accordion-active-color: var(--theme-blue);
    --bs-accordion-active-bg: #f0f0f0;
    --bs-accordion-btn-active-icon:  url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23834e98'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.accordion-item {
    margin-bottom: 20px;
}
.accordion-item:not(:first-of-type) {
    border-top: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color);
}

/*Disable toggel*/
.accordion-item, .accordion-item:not(:first-of-type) { border: 0px; }
.accordion-button::after { display: none; }
.accordion-button:not(.collapsed) { background-color: #fff; box-shadow: none; color: #000; }
.accordion-button, .accordion-body { padding: 12px 0; }
.accordion-header { border-bottom: 1px solid var(--bs-accordion-border-color); font-size: 20px; }
.accordion-button { font-size: 21px; font-weight: 600; }


.supllier, .supplier { color:var(--theme-blue); position: absolute; top: 20px; right: 20px; left: unset; font-size: 14px; }
.prd_box {
    background: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 5px 10px -5px #0000002b;
    margin-bottom: 30px;
    border: 1px solid #f0f0f0;
    position: relative;
/*    width: calc(50% - 15px);*/
    width: calc((100% - 60px) / 3);
    display: flex;
    flex-direction: column;
}
.prd_wrapper { display: flex; flex-wrap: wrap; column-gap: 30px; }
.prd_box h4 { width: 70%; font-size: 18px; margin-bottom: 0; }
.prd_box h6 { font-size: 12px; margin-bottom: 0; color: var(--theme-pink); margin-top: 5px; }
.prd_box .prd_desc { 
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;  
  overflow: hidden;
    font-size: 16px;
    line-height: 1.3;
}
.prd_box .action {
    margin-top: auto;
}

/*Filter Options*/
.fltz_list { width: calc(100% - 110px); }
.filter_opts {
    background: #6f448b;
    color: #fff;
    padding: 12px;
}
.filter_opts ul.list-styled, .added_filter ul.list-styled {
    display: flex;
    text-align: center;
    column-gap: 20px;
    align-items: center;
}
.filter_opts ul.list-styled li {
    flex-grow: 1;
    padding: 5px 20px;
    position: relative;
    border-radius: 5px;
}
.filter_opts ul.list-styled li:hover {
    background: #fff;
    color: var(--theme-blue);
}
.filter_opts .filter_cats {
    position: absolute;
    top: 100%;
    z-index: 2;
    border-radius: 4px;
    min-width: 100%;
    text-align: left;
    box-shadow: 0 5px 12px -4px #0003;
    left: 0;
    opacity: 0;visibility: hidden;
    transition: all 0.3s linear;
    max-height: 350px;
    overflow: auto;
}
.filter_opts .filter_cats .card {
    padding: 20px;
}
.filter_opts ul.list-styled li:hover .filter_cats  {
    opacity: 1;
    visibility: visible;
}

.subcategory-list label.form-check-label {
    font-size: 14px;
    line-height: 1.4;
}

.added_filter ul.list-styled { margin-bottom: 30px; flex-wrap: wrap; border-bottom: 1px solid #efefef; padding-bottom: 20px; row-gap: 12px; }
.added_filter ul.list-styled li {
    padding: 6px 15px;
    border: 1px solid var(--theme-pink);
    border-radius: 4px;
/*    margin-bottom: 12px;*/
}
.added_filter ul.list-styled li i.text-pink {
    color: var(--theme-pink);
}

.link{
  font-weight:bold;
  color:#CF6A24;
  text-decoration: underline;
  font-style:italic;
}
.link:hover{
  color:#834e98;
  text-decoration: underline;
}
.grade.table th:first-child { width: 15% !important; }

.page-title-content .title {
  font-size: 52px;
  font-weight: 400;
  letter-spacing: 1px;
  margin-top: 0px;
}

.specs.table .ratio{
  width:10%;
}
.specs.table .viscosity{
  width:16%;
}

.specs.table .products-column{
  width:16%;
}
.brand-img{
  display: flex;
  justify-content:end;
  align-items:end;
}

.brand-img img{
  width: 350px;
  height: auto;
}
.supplier_img.bg-light.h-100 {
    height: 300px !important;
    margin-top: 65p;
    position: sticky;
    top: 108px;
}
.specs.table .industry{
  width:26%;
}
.cats {
  height: 350px;
  overflow-y: scroll;
}

/* Webkit browsers (Chrome, Safari, Edge) */
.cats::-webkit-scrollbar {
  width: 8px; /* Customize scrollbar width */
}

.cats::-webkit-scrollbar-track {
  background: #f0f0f0; /* Customize scrollbar track color */
}

.cats::-webkit-scrollbar-thumb {
  background-color: #6F448B; /* Customize scrollbar thumb color */
  border-radius: 8px; /* Optional: rounded corners */
}

.cats::-webkit-scrollbar-thumb:hover {
  background-color: #555; /* Darker color on hover */
}

/* Firefox */
.cats {
  scrollbar-width: thin; /* Set scrollbar width to thin */
  scrollbar-color: #888 #f0f0f0; /* Set thumb and track colors */
}
.conclusion {
    background: #fbf5fe;
}
.social_share li a {
    border: 1px solid var(--theme-blue);
    width: 32px; height: 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    border-radius: 50%;
    color: var(--theme-blue);
    font-size: 15px;
    margin-right: 15px;
}
.social_share li a:hover {
    background: var(--theme-blue);
    color: #fff;
}



@media (max-width: 770px){
  .page-title-content{
    height:0px;

  }
  .prd-title{
    height: 50vh;
  }
  .page-title-content .title{
    font-size: 50px;
    margin-top: 400px;
  }
  .section{
    padding: 50px 0px;
  }
  .supplier_img{
    height:150px !important;
    position: sticky;
    top:100px;
    margin-left: 0px !important;

  }
  .specs.table .industry {
    width: 26%;
}
p,td,li,.accordion-body{
  font-size: 16px;
  line-height: 1.4;
}
}

@media (max-width: 430px) {
  .sec_title{
    font-size: 26px;
  }
  p,td,li,.accordion-body{
    font-size: 15px;
    line-height: 1.4;
  }
  .section{
    padding: 50px 0px;
  }
  .prd-title{
    height:38vh;
    
  }
  .page-title-content .title{
    font-size: 42px;
    margin-top: 400px;
    text-align: left;
  }
  .page-title-content{
    height:0px;
  }
  
  :not(footer) .divider {
    margin: 30px 0;
}
.list-styled.icon-list li i{
  top:12px;
}


}

.ptc {
  height:50vh !important;
  align-items:flex-end !important;
  padding-bottom: 50px;

}



@media (max-width: 992px) {
    .prd-title { height: 340px; }
    .prd-title .page-title-content {  height: 325px !important; }
    .prd-title .page-title-content .title {  font-size: 36px !important;   }
    .prd-detail .sec_title { font-size: 30px; }
    .accordion-button { font-size: 18px; }
    .fltz_list {  width: calc(100% - 80px); }
    .search_field.p-4 {  padding: 15px !important; margin-bottom: 15px !important  } 
    .search_field.p-4 h4 {  font-size: 15px;  } 
    .search_field .theme-btn.dark { padding: 8px 8px; height: 40px; font-size: 14px; }
    .search_field .row .col-2 { width: 24%; }
    .search_field .mb-5 { margin-bottom: 1.1rem !important; }
    .search_field input { font-size: 14px; height: 40px; }
    .prd_box {  width: calc((100% - 30px) / 2);  }
    .supllier, .supplier { font-size: 12px; }
    .prd_box h4 {  width: 55%; margin-bottom: 6px !important; }
    .prd_box .prd_desc { font-size: 14px; }
    .filter_opts .filter_cats .card { padding: 10px; }
    .card-body .form-check { font-size: 14px; margin-top: 4px; }
    .filter_opts .filter_cats { min-width: 185px; }
    .added_filter ul.list-styled li { padding: 4px 7px; font-size: 14px; }
    .added_filter .theme-btn { font-size: 12px; padding: 8px 12px; }
    .added_filter ul.list-styled { row-gap: 10px; column-gap: 14px; }
}

@media (max-width: 768px) {
    .prd-title { height: 250px; }
    .prd-title .page-title-content .title {
        margin-top: 70px !important;
        font-size: 27px !important;
    }
    .prd-detail .sec_title { font-size: 24px !important; }
    .accordion-button { font-size: 16px; }
    .supplier_img.bg-light.h-100 { height: 45vw !important; margin-top: 25px; }
    .search_field.p-4 {  padding: 12px !important;   }
    .search_field.p-4 .row {  flex-direction: column;   }
    .search_field.p-4 .row *:not(i) { width: 100%; }
    .search_field.p-4 h4, .search_field input { margin-bottom: 14px !important; }
    .prd_box { width: 100%; margin-bottom: 20px; }
    .prd_box .prd_desc { margin: 5px 0 12px !important; }
    .filter_opts .container { padding: 0; }
    .filter_opts .filter_cats { opacity: 1; visibility: visible; position: static; max-height: unset; }
    .filter_opts {
        height: 100vh;
        width: 75%;
        top: 0;
        left: -100%;
        position: fixed;
        z-index: 999;
        overflow: auto; 
        transition: all 0.3s;
    }
    .filter_opts.open { left: 0;}
    .filter_opts label[for="Filter"] { display: block; width: 100%; }
    .filter_opts label i{ float: right;  margin-top: 5px; }

    .filter_opts ul.list-styled li { padding: 12px 2px;  border-bottom: 1px solid #ffffff80;  border-radius: 0; }
    .filter_opts ul.list-styled, .filter_opts .d-flex  { flex-direction: column; align-items: start !important; }
    .fltz_list, .filter_opts ul.list-styled li { width: 100%; text-align: left; }
    .filter_opts .filter_cats .card { margin-top: 10px; }
/*    .filter_opts ul.list-styled li:hover  .filter_cats { max-height: 305px; }*/
}