/* .breadcrumb-navigation {
  padding: 10px 18px;
} */

.breadcrumb-navigation>li {
  display: inline;
}

.heading-pages svg{
  margin-left: 10px;
  padding-top: 7px;
  margin-right: 10px;
  cursor: pointer;
}
ul, ol {
  margin: 0px !important;
}
.title--text:hover, .title--text:focus, .title--text:active {
    
    color: grey !important;
}
.title--text{
color: grey !important;

}

.breadcrumb-navigation>li {
  color: grey;
}

.breadcrumb-navigation>li>a {
  color: grey;
  font-weight: 800;
  font-size: 18px;
  text-decoration: none;
}

.breadcrumb-navigation>li>a:hover {
  color: #165380;
  text-decoration: underline;
}

.breadcrumb-navigation li+li::before {
  content: "-";
  display: inline-block;
  width: 1em; /* Adjust the width as needed for spacing */
  text-align: center; /* Center the hyphen horizontally */
}

.item-link a {
  color:#165380;
}

.item-link a:hover {
  color: black;
}

.card-container {
  display: grid;
 grid-template-columns: auto auto auto auto;
  width: 100%;
   row-gap: 20px;

}
.cardtext{
  display: flex;
  flex-direction: row;
  overflow: hidden;
}

.card-text{
  padding: 20px;
 
}
.cardtext{
  padding-bottom: 40px;
}
.heading-pages{
  text-align: center;
  margin: 20px;
}

.image-box{
height: 200px;
width: 400px;
}


.card {
  /* width: 400px; 4 cards per row with some gap */
  /* border: 1px solid #ccc; */
  overflow: hidden;
  position: relative;
  transition: transform 0.3s;
}

.card img {
  width: 170px;
  height: 170px ;
  display: block;
}

.card-content {
  
  margin: 10px;
  width: 75%;
  align-items: center;
}
.card-box-text{
  background-color: white;
padding: 5px ;
color: black;
text-align: center;
}

.card-content h3 {
  font-size: 1.5em;
  margin: 0;
}

.card-content p {
  margin: 10px 0;
}




.card:hover {
  transform: scale(1.05);
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  text-align: left;
  padding: 8px;
}
tr:nth-child(even) {
  background-color: #dddddd;
}

@media screen and (max-width: 320px) {
  .cardtext{
    display: flex;
    flex-direction: column;
  }
  .image-box{
    height: 400px;
    width: 400px;
    }
    .card img {
      width: 100%;
      height: 260px ;
      
    }
    .card-container {
      display: grid;
     grid-template-columns: auto;
      width: 100%;
      gap:10px ;
    
    }
    .card-content {
     width: 90%;
    }
    /* .card-box-text{
     
      width: 240px;
     
      } */

      
      /* .card-content {
        position: absolute;
        top: 190px;
        align-items: center;
      } */
}

@media screen and (min-width: 320px) and (max-width: 480px) {
  .cardtext{
    display: flex;
    flex-direction: column;
  }
  .image-box{
    height: 400px;
    width: 400px;
    }
    .card-container {
      display: grid;
     grid-template-columns: auto auto;
      width: 100%;
      gap:10px ;
    
    }
    .card img {
      width: 350px;
      height: 200px ;
      
    }
    /* .card-content {
      position: absolute;
      top: 140px;
      width: 85%;
      align-items: center;
    }
       */
}

@media screen and (min-width: 481px) and (max-width: 768px) {
  .cardtext{
    display: flex;
    flex-direction: column;
  }
  .image-box{
    height: 420px;
    width: 100%;
    }
    
    /* .card-content {
      position: absolute;
      top: 190px;
      width: 85%;
      align-items: center;
    } */
    .card img {
      width: 250px;
      height: 250px ;
      
    }
    .card-container {
      display: grid;
     grid-template-columns: auto auto auto ;
      width: 100%;
      gap:10px ;
    
    }
}

@media screen and (min-width: 769px) and (max-width: 1023px) {
  .cardtext{
    display: flex;
    flex-direction: column;
  }
  .image-box{
    height: 420px;
    width: 100%;
   
    }
    /* .card-content {
      position: absolute;
      top: 110px;
      width: 85%;
      align-items: center;
    } */
    .card img {
      width: 320px;
      height: 170px ;
     
    }
    .card-container {
      display: grid;
     grid-template-columns: auto auto auto;
      width: 100%;
      gap:10px ;
    
    }
}

@media screen and (min-width: 1024px) and (max-width: 1200px) {
  .image-box{
    height: 250px;
    width: 250px;
    object-fit: fill;
    }

    .card img {
      width: 150px;
      height: 150px ;
     
    }
    .card-container {
      display: grid;
     grid-template-columns: auto auto auto auto;
      width: 100%;
    
    }
}

@media screen and (min-width: 1201px) {
  .image-box{
    height: 250px;
    width: 250px;
    }
    /* .card-content {
      position: absolute;
      top: 110px;
      align-items: center;
    } */
    .card-container {
      display: grid;
     grid-template-columns: auto auto auto auto;
      width: 100%;
      gap:10px ;
    
    }

}