/*** FONTS ***/
@import url(https://fonts.googleapis.com/css?family=Montserrat:900|Raleway:400,400i,700,700i);

/*** VARIABLES ***/
/* Colors */
:root {
  --primary-bg: #007bff; /* Bootstrap primary blue */
  --primary-bg-light: rgba(13, 110, 253, 0.1);
  --primary-bg-lighter: rgba(13, 110, 253, 0.2);
  --primary-bg-lightest: rgba(13, 110, 253, 0.05);
  --secondary-bg: #f8f9fa; /* Light gray background */
  --text-color: #1d1f20; /* Dark text color */
}

/*** EXTEND ***/
/* box-shadow */
ol.gradient-list > li::before,
ol.gradient-list > li {
  box-shadow: 0.25rem 0.25rem 0.6rem rgba(0, 0, 0, 0.05), 0 0.5rem 1.125rem rgba(0, 0, 0, 0.05);
}

/*** STYLE ***/
*,
*:before,
*:after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background-color: white;
  color: var(--text-color);
  /* font-family: "Raleway", sans-serif; */
}

main {
  display: block;
  margin: 0 auto;
  max-width: 80%;
  padding: 1rem;
}

ol.gradient-list {
  counter-reset: gradient-counter;
  list-style: none;
  margin: 1.75rem 0;
  padding-left: 1rem;
}

ol.gradient-list > li {
  background: aliceblue;
  border-radius: 0 0.5rem 0.5rem 0.5rem;
  counter-increment: gradient-counter;
  margin-top: 1rem;
  min-height: 3rem;
  padding: 1rem 1rem 1rem 3rem;
  position: relative;
}

ol.gradient-list > li::before,
ol.gradient-list > li::after {
  background: var(--primary-bg);
  border-radius: 1rem 1rem 0 1rem;
  content: "";
  height: 3rem;
  left: -1rem;
  overflow: hidden;
  position: absolute;
  top: -1rem;
  width: 3rem;
}

ol.gradient-list > li::before {
  align-items: flex-end;
  content: counter(gradient-counter);
  color: white;
  display: flex;
  font: 900 1.5em/1 "Montserrat";
  justify-content: flex-end;
  padding: 0.125em 0.25em;
  z-index: 1;
}

/* Gradient shades for items */
ol.gradient-list > li:nth-child(10n+1):before {
  background: var(--primary-bg-lightest);
}
ol.gradient-list > li:nth-child(10n+2):before {
  background: var(--primary-bg-lighter);
}
ol.gradient-list > li:nth-child(10n+3):before {
  background: var(--primary-bg-light);
}
ol.gradient-list > li:nth-child(10n+4):before {
  background: var(--primary-bg);
}
ol.gradient-list > li:nth-child(10n+5):before {
  background: var(--primary-bg-light);
}
ol.gradient-list > li:nth-child(10n+6):before {
  background: var(--primary-bg-lighter);
}
ol.gradient-list > li:nth-child(10n+7):before {
  background: var(--primary-bg-lightest);
}
ol.gradient-list > li:nth-child(10n+8):before {
  background: var(--primary-bg-light);
}
ol.gradient-list > li:nth-child(10n+9):before {
  background: var(--primary-bg-lighter);
}
ol.gradient-list > li:nth-child(10n+10):before {
  background: var(--primary-bg-lightest);
}

ol.gradient-list > li + li {
  margin-top: 2rem;
}
.carousel-inner img {
  height: 70vh; /* 70% of the viewport height */
  object-fit: cover;
  width: 100%;
}

.scrollable-list {
  margin: 20px;
  max-height: 600px; /* Set your preferred max height */
  overflow-y: auto;
  background-color: #f9f9f9; /* Optional, for contrast */
  padding: 10px; /* Add padding so the shadow effect is fully visible */
 border-right:3px solid #007bff;
 border-left:3px solid #007bff;
  /* Inner shadow effect */
  box-shadow: inset 0px 10px 8px -8px rgba(0, 0, 0, 0.3), /* Top shadow */
              inset 0px -10px 8px -8px rgba(0, 0, 0, 0.3); /* Bottom shadow */
}

/* Optional: Adjust scrollbar style */
.scrollable-list::-webkit-scrollbar {
  width: 8px;
}

.scrollable-list::-webkit-scrollbar-thumb {
  background-color: #007bff;
  border-radius: 4px;
}