/* Custom Styling for Tabs */
/* Shimmer Effect */
.skeleton {
    background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
    background-size: 1000px 100%;
    animation: shimmer 1.5s infinite linear;
    color: transparent !important;
    border-radius: 4px;
  }

  @keyframes shimmer {
    0% {
      background-position: -1000px 0;
    }
    100% {
      background-position: 1000px 0;
    }
  }
.shimmer {
    animation: shimmer 1.5s infinite linear;
    background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
    background-size: 1000px 100%;
  }

  @keyframes shimmer {
    0% {
      background-position: -1000px 0;
    }
    100% {
      background-position: 1000px 0;
    }
  }
/* Reusable shimmer animation */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.shimmer-wrapper {
  position: relative;
  overflow: hidden;
}

.shimmer-img,
.shimmer-text {
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e0e0e0 50%,
    #f0f0f0 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}

.shimmer-img {
  height: 350px; /* Adjust according to your image size */
}

.shimmer-text {
  height: 150px; /* Adjust according to text length */
}

.blog-content,
.imgs {
  position: relative;
  z-index: 2;
}


.imgs {
  transition: opacity 0.5s ease-in-out;
  opacity: 1;
}

.imgs.show {
  opacity: 1;
  display: block;
}


.shimmer-text {
    width: 80%;
    height: 20px;
    background: linear-gradient(to right, #f6f7f8 0%, #e0e0e0 50%, #f6f7f8 100%);
    background-size: 200% 100%;
    animation: shimmer-animation 1.5s infinite linear;
    border-radius: 5px;
    margin-bottom: 5px;
}

.custom-nav-tabs {
    /*background-color: #f8f9fa;*/
    border-radius: 10px;
    padding: 10px;
}

.custom-nav-tabs .nav-link {
    border: none;
    border-radius: 50px;
    margin: 5px 0;
    text-align: justify;
    padding: 10px 15px;
    transition: all 0.3s ease-in-out;
    color: #6c757d;
}

.custom-nav-tabs .nav-link.active {
    background-color: #324959;
    color: #fff;
    text-align: justify;
    font-weight: bold;

}

.custom-nav-tabs .nav-link:hover {
    background-color: #e2e6ea;
    color: #495057;
}

/* Animation for Tab Content */
.tab-pane {
    animation: fadeIn 0.5s;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media all and (max-width:400px) {
    .tbody td {
        padding: 8px;
        border: 1px solid #ddd;
        text-align: left;
        white-space: wrap;
        /* Prevent wrapping of content */
    }

    .table {
        width: 100%;
        border-collapse: collapse;
        /* Combines table borders */
        min-width: 600px;
        /* Prevent table from shrinking too much */
    }

    /* General Table Styling */
    .table {
        width: 100%;
        border-collapse: collapse;
        margin: 20px 0;
        font-size: 16px;
        text-align: left;
    }

    .thead th {
        background-color: #f2f2f2;
        color: #333;
        font-weight: bold;
        padding: 10px;
    }

    .tbody td {
        border: 1px solid #ddd;
        padding: 8px;
    }

    /* Responsive Table Wrapper */
    .table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        /* Smooth scrolling on iOS */
    }

    .table {
        min-width: 600px;
        /* Prevent table from becoming too small */
    }


}