body {
  font-family: system-ui, sans-serif;
  background: #f5f7fa;
  margin: 0;
  padding: 0;
  background: linear-gradient(rgb(255 253 253 / 50%), rgb(255 255 255 / 50%)), 
  url(../images/bg.webp) no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
}

.container {
  max-width: 1100px;
  /* margin: 40px auto;
  padding: 0 20px; */
}

.title_header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  /* margin-bottom: 18px; */
}
.logo img {
    width: 137px;
    height: auto;
}
h1 {
  font-size: 1.6rem;
  margin: 0;
}
.title_header h1.mb-4 {
    font-weight: 800;
    color: #0D4465;
}

.filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.search-input-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.search-input-wrap #searchInput {
  padding-right: 34px;
}

.clear-search-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: #666;
  font-size: 16px;
  line-height: 1;
  padding: 0;
  width: 18px;
  height: 18px;
  cursor: pointer;
  display: none;
}

.clear-search-btn:hover {
  color: #dc3545;
  background: transparent;
}

select, input[type="text"], button {
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: white;
  font-size: 14px;
}
/* header .filters select, header .filters input[type="text"], header .filters button{
  width: 216px;
} */
/* button {
  background: #007bff;
  color: white;
  cursor: pointer;
  transition: 0.2s;
}
button:hover {
  background: #0056b3;
} */

.product-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

.product-list.category{
  display: grid;
  grid-template-columns: 100%;
  gap: 16px;
  background: #fff;
}

.product-card {
  background: white;
  border-radius: 10px;
  /* box-shadow: 0 1px 4px rgba(0,0,0,0.1); */
  box-shadow: 0 1px 4px rgb(0 0 0 / 17%);
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.2s;
  overflow: hidden;
}
.product-card a {
    color: #1a4167;
    text-decoration: none;
}
.product-card a:hover {
    color: #dc3545;
    text-decoration: none;
}
.product-card:hover {
  transform: translateY(-4px);
}

.product-card img {
  width: 100%;
  height: auto;
  /* height: 160px; */
  /* object-fit: cover; */
  text-align: center;
  border-radius: 8px;
  margin-bottom: 10px;
}

.product-card h3 {
  font-size: 1rem;
  margin-bottom: 6px;
}

.category {
  font-size: 13px;
  color: #666;
  margin-bottom: 10px;
}

.actions {
  display: flex;
  /* justify-content: space-between; */
  justify-content: center;
  align-items: center;
  /* gap: 6px; */
  gap: 2px;
  background: #255073;
  /* background: #d5f9ff; */
  padding: 5px 9px;
  border-radius: 18px;
}
.copyrightarea p {
    color: #fff;
    font-size: 13px;
    margin-bottom: 0px;
    padding: 10px 0px;
}
.copyrightarea p a {
    color: #4e8bbd;
}
.bg-dark-blue{
  background-color: #255073;
}
/* .download-btn {
  text-decoration: none;
  background: #28a745;
  color: white;
  padding: 6px 10px;
  border-radius: 5px;
  font-size: 13px;
}
.download-btn:hover {
  background: #218838;
}

.action-buttons .view-btn {
  text-decoration: none;
  background: #0d6efd;
  color: white;
  padding: 6px 6px;
  border-radius: 5px;
  font-size: 13px;
}
.action-buttons .view-btn:hover {
  background: #1670f8;
}

.action-buttons a, .action-buttons button {
  text-decoration: none;
  background: #28a745;
  color: white;
  padding: 6px 6px;
  border-radius: 5px;
  font-size: 13px;
  border: none;
  cursor: pointer;
}

.action-buttons button.share-btn {
  background: #17a2b8;
}
.action-buttons a:hover {
  background: #218838;
}
.action-buttons button.share-btn:hover {
  background: #117a8b;
}


.action-buttons .phone-btn {
  text-decoration: none;
  background: #212529;
  color: white;
  padding: 6px 6px;
  border-radius: 5px;
  font-size: 13px;
}
.action-buttons .phone-btn:hover {
  background: #202427;
}

.action-buttons .email-btn {
  text-decoration: none;
  background: #0dcaf0;
  color: white;
  padding: 6px 6px;
  border-radius: 5px;
  font-size: 13px;
}
.action-buttons .email-btn:hover {
  background: #0fb5d6;
} */
.action-buttons a{
  padding: 2px 4px;
  color: #ffffff;
  font-size: 16px;
}
.action-buttons a:hover {
    color: #dc3545;
}

.action-buttons button{
  background-color: initial;
  border: inherit;
  color: #ffffff;
  padding: 2px 5px;
  font-size: 16px;
}
.action-buttons button:hover{
  background-color: inherit;
  color: #dc3545;
}

i.fa-brands.fa-whatsapp{
  color: #1bd11b;
  font-size: 18px;
}
h5.productsname {
    font-size: 16px;
}

h3.productsname {
    color: #182a4e;
}
h3.productsname {
    color: #182a4e;
    font-size: 17px;
}
.action-buttons {
    margin: auto;
    text-align: center;
}
.filters button#downloadSelected{
  background-color: #0D4468;
  font-weight: 600;
  border-radius: 20px;
  color: #fff;
}
.filters button#downloadSelected:hover{
  background-color: #3478a5;
  font-size: 14px;
  color: #fff;
  text-decoration: none;
}
.category{
  color: #0D4468;
}
.actions label b {
    font-size: 12px;
    color: #3c3c3c;
}

.product-card p {
    margin-bottom: 5px;
}
b.selectpdf {
    font-size: 13px;
    color: #303030;
}

.complete_catalogue{
  padding: 8px 10px;
  /* border: 1px solid #ccc; */
  border-radius: 6px;
  background-color: #dc3545;
  border: 1px solid #dc3545 !important;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  border-radius: 20px;
}
.complete_catalogue:hover{
  background-color: #3478a5;
  border: 1px solid #3478a5 !important;
  font-size: 14px;
  color: #fff;
  text-decoration: none;
}
.nav-tabs{
  align-items: center;
}
.nav-tabs .nav-link{
  font-size: 14px;
  font-weight: 600;
  color: #0D4468;
}
table.table.table-bordered.table-striped{
  vertical-align: baseline;
}
table.table.table-bordered.table-striped thead tr th {
    font-size: 16px;
    background: #1c5274;
    color: #fff;
}
ul.navbar-nav li a.nav-link {
    color: #ffffff;
    font-weight: 700;
}
li.nav-item {
    margin-left: 8px;
}
.navbar-light .navbar-nav .nav-link{
  color: #ffffff;
}
.navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .show>.nav-link, .navbar-light .navbar-nav .nav-link:hover{
  color: #ff4557;
  /* background-color: #1c5274; */
}
/* ul.navbar-nav li a {
    border: 1px solid #ffffff;
    border-radius: 20px;
} */
 .navbar-light .navbar-nav .nav-link:focus{
  color: #ff4557;
 }
.title_header h1{
      font-weight: 800;
      color: #1a4167;
}


/* table responsive and desktop */
/* Desktop view = normal table */
.table {
  width: 100%;
  border-collapse: collapse;
}
.social-icon ul{
  margin-bottom: 0px;
  padding-left: 0px;
  padding: 5px 0px;
}
.social-icon ul li {
    list-style: none;
    list-style-type: none;
    display: inline-block;
}
.social-icon ul li a{
  text-decoration: none;
}
.social-icon i.fa-brands{
    display: block;
    margin: auto;
    text-align: center !important;
    padding: 5px;
    border-radius: 3px;
    color: #fff;
}

.social-icon i.fa-brands.fa-brands {
    background: #3b5998;
    transition: transform 0.2s;
}
.social-icon i.fa-brands.fa-x-twitter {
    background-color: #55acee;
    transition: transform 0.2s;
}
.social-icon i.fa-brands.fa-instagram{
	background: #f09433;
    background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
    background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
    transition: transform 0.2s;
}
.social-icon i.fa-brands.fa-linkedin {
    background-color: #0077b5;
    transition: transform 0.2s;
}
.social-icon i.fa-brands.fa-pinterest {
    background-color: #bd081c;
    transition: transform 0.2s;
 }
.social-icon i.fa-brands.fa-youtube {
    background-color: #bd081c;
    transition: transform 0.2s;
 }
.social-icon i.fa-brands.fa-whatsapp{
  background-color: #1bad1b;
  transition: transform 0.2s;
}
.social-icon i:hover {
  transform: translateY(-4px);
}

.phone-email ul li {
    display: inline-block;
    list-style-type: none;
    list-style: none;
}
.phone-email ul {
    float: right;
    margin-bottom: 0px;
    padding: 5px 0px;
}
.phone-email ul li a{
  color: #1c5274;
  text-decoration: none;
  font-weight: 600;
}
.phone-email ul li a:hover{
  color: #dc3545;
  transition: all 0.5s ease-in;
}



/* Mobile view = cards */
@media (max-width: 768px) {
  table.table {
    display: block;
    border: none;
  }

  table.table thead {
    display: none;
  }

  table.table tbody {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  table.table tr {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    /* padding: 12px 15px; */
    padding: 0px;
  }

  table.table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: none !important;
    padding: 6px 10px;
  }

  table.table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #333;
  }

  table.table .actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 5px;
    width: 100%;
  }

  table.table .action-buttons a,
  table.table .action-buttons button {
    font-size: 18px;
  }
  .action-buttons a{padding: 2px 4px;}
  .gap-2{gap: .3rem !important;}
  .navbar-light .navbar-toggler-icon {
    filter: invert(1);
  }
  .navbar-light .navbar-toggler {
      color: rgb(255 255 255 / 55%);
      border-color: #b7b7b7;
  }
}

@media(min-width:320px) and (max-width:574px){
  header h1 {margin-bottom: 15px;}
  ul.navbar-nav li a{text-align: center;}
  li.nav-item {
      width: 100%;
      margin-bottom: 8px;
  }
    nav.navbar.navbar-expand-lg.navbar-light.bg-light, .navbar-light .navbar-toggler {
      /* margin: 0px auto 0px; */
      margin: 0px;
  }
  .navbar-toggler:hover, .navbar-light .navbar-toggler{background: #1a4167; margin-bottom: 0px;}
  .navbar-light .navbar-toggler-icon{filter: invert(1);}
  ul.navbar-nav {margin: 15px auto 0px;text-align: center;}
  .filters{display: block; margin: auto; float: none !important;
        text-align: center;}
  li.nav-item{margin-left: 0px;}

  select#categoryFilter{margin-bottom: 15px;}
  .title_header br {display: none;}
  select, input[type="text"], button{margin-bottom: 10px;}
  .action-buttons button{margin-bottom: 0px;}
  .action-buttons a{padding: 2px 6px;}
  .gap-2{gap: .4rem !important;}
    h5.productsname.mb-0 {
      font-size: 16px;
  }
    .table-bordered>:not(caption)>* {
      border-width: 0px 2px;
  }
  .navbar-light .navbar-toggler-icon {
    filter: invert(1);
  }
  .navbar-light .navbar-toggler {
      color: rgb(255 255 255 / 55%);
      border-color: #b7b7b7;
  }
  .social-icon ul {
      margin: auto;
      text-align: center;
  }
  .phone-email ul {
    float: none;
    margin: auto;
      text-align: center;
  }
  .product-list.category{background-color: inherit;}
}