/*************************/
/* Carousel */

.carousel-control-prev,
.carousel-control-next {
   width: 15%;
   height: 50px;
   top: auto;
   /* Align it at the bottom */
   bottom: 10px;
   z-index: 1;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
   width: 40px;
   height: 40px;
   background-color: var(--primary);
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
}

.carousel-indicators {
   position: absolute;
   bottom: -30px;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
   justify-content: center;
   gap: 10px;
}

.carousel-indicators [data-bs-target] {
   width: 10px;
   height: 10px;
   background-color: var(--secondary);
   border-radius: 50%;
}

.carousel-indicators [data-bs-target].active {
   background-color: var(--primary);
}

.error {
   color: red;
}

.text-justify {
   text-align: justify !important;
}

.text-yellow {
   color: #fdc807 !important;
}

.text-white {
   color: #f9f9f9 !important;
}

.text-grey {
   color: #696E77 !important
}

/* Default styling for the blue box (desktop view) */
.blue-box {
   width: 200px;
   height: 200px;
   position: absolute;
   top: 0;
   left: 0;
   background-color: white;
   border-radius: 10px;
   padding: 10px;
}

.blue-box-content {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   background-color: #007bff;
   /* Adjust the color as per your blue */
   border-radius: 10px;
   height: 100%;
   padding: 10px;
   text-align: center;
}

.blue-box-content h1 {
   font-size: 28px;
   /* Adjust for desktop */
   margin: 0;
   color: white;
}

.blue-box-content h2 {
   font-size: 20px;
   margin: 5px 0;
   color: white;
}

.blue-box-content h5 {
   font-size: 16px;
   margin: 0;
   color: white;
}

/* Responsive styling for mobile view */
@media (max-width: 768px) {
   .blue-box {
      width: 120px !important;
      /* Smaller width */
      height: 120px !important;
      /* Smaller height */
   }

   .blue-box-content h1 {
      font-size: 18px !important;
      /* Smaller size for "21" */
   }

   .blue-box-content h2 {
      font-size: 14px !important;
      /* Smaller size for "Years" */
   }

   .blue-box-content h5 {
      font-size: 12px !important;
      /* Smaller size for "Experience" */
   }
}


.card:hover {
   transform: scale(1.05);
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
   transition: 0.3s ease;
}

h1.display-6.text-primary {
   font-weight: bold;
   text-transform: uppercase;
}

ul.list-unstyled li {
   font-size: 1rem;
   line-height: 1.5;
   color: #555;
}

ul.list-unstyled li strong {
   color: #16469b;
}

.btn-primary {
   background-color: #16469b;
   border-color: #16469b;
}

.btn-primary:hover {
   background-color: #0e3470;
   border-color: #0e3470;
}

.blockquote {
   border-left: 4px solid var(--primary);
   padding-left: 15px;
   font-style: italic;
   color: #444;
}

/* ul.list-unstyled li {
   font-size: 1rem;
   color: #555;
} */

ul.list-unstyled li i {
   flex-shrink: 0;
   font-size: 1.2rem;
}

/* .img-fluid {
   transition: transform 0.3s ease, box-shadow 0.3s ease;
} */

.img-fluid {
   transform: scale(1.05);
   /* box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3); */
}

.shadow-lg {
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2) !important;
}

table {
   width: 100%;
   border-collapse: collapse;
   overflow: hidden;
   border-radius: 10px;
}

thead {
   background-color: #004085;
   color: #fff;
}

th,
td {
   padding: 15px;
   text-align: center;
   border: 1px solid #ddd;
}

tbody tr:nth-child(odd) {
   background-color: #f2f2f2;
}

tbody tr:hover {
   background-color: #e8f0fe;
   transition: background-color 0.3s;
}

.checkmark {
   color: green;
   font-weight: bold;
}

.crossmark {
   color: red;
   font-weight: bold;
}

.footer-note {
   margin-top: 20px;
   text-align: center;
   color: #888;
   font-size: 0.9rem;
}


.custom-tab {
   color: #003d72;
   /* Theme blue color */
   border: 1px solid #003d72;
   /* font-weight: bold; */
   margin: 0 5px;
   border-radius: 50px;
}

.custom-tab.active {
   background-color: #003d72;
   color: #fff;
}

.stylish-accordion {
   background: #f9f9f9;
   border: 1px solid #003d72;
   color: #003d72;
   font-weight: bold;
   transition: all 0.3s ease;
}

.stylish-accordion:hover {
   background: #003d72;
   color: #fff;
}

.logo-img {
   height: 90px !important;
   width: auto;
}

/* Card Styling for All Blogs Page */
.card {
   border: none;
   transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.card:hover {
   transform: translateY(-5px);
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.card-img-top {
   height: 200px;
   object-fit: cover;
}

/* Blog Content */
.blog-content img {
   max-height: 400px;
   object-fit: cover;
}

/* Sidebar Blog List */
.sidebar .list-group-item {
   border: none;
   transition: background-color 0.3s ease;
}

.sidebar .list-group-item:hover {
   background-color: var(--primary);
   color: white;
}

.sidebar .list-group-item a:hover {
   color: white !important;
}

.card {
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}

.card-body {
   flex-grow: 1;
   /* Ensures the content inside stretches to fill available space */
}


.ins-icon {
   height: 60px;
   width: auto;
}