html, body {
  height: 100%;  /* needed for flexbox to stretch */
  margin: 0;
}

.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;  /* full viewport height */
}

.content {
  flex: 1;
}

.search-curved-bottom {
    position: relative;
    z-index: 1;
    /* no height restrictions */
}

.search-curved-bottom::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 214px; /* fixed height for the curve */
    background-image: url("../images/home-curved-bottom.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center bottom;
    z-index: -1; /* behind content */
}


.searchpage-box{
	background-color: white;
	border-radius: 10px;
	border: 1px solid gray;
}

.searchpage-input{
	border-radius: 10px;
}

.invisible {
  visibility: hidden;
  display: block;
  margin-bottom: 0.25rem;
}

.right-border{
	border-right: solid 1px #C4C3C2;
	border-left: solid 1px #C4C3C2;
}

.bottom-border{
	border-bottom: solid 1px #C4C3C2;
}

.search-layout-buttons{
	background-color: white;
	border: 5px solid #a6e1fc;
	font-weight: bold;
	font-size: 1rem;
	border-radius: 10px;
	font-family: 'Inter', sans-serif;
	white-space: nowrap;
}

.search-layout-buttons:active,
.search-layout-buttons:focus{
	background-color: #02749f;
	border: 5px solid #a6e1fc;
	font-weight: bold;
	font-size: 1rem;
	border-radius: 10px;
	font-family: 'Inter', sans-serif;
	white-space: nowrap;
}

.search-layout-buttons.active {
  background-color: #02749f;
  color: white;
  border: 5px solid #a6e1fc;
}

.course-carousel {
  overflow: hidden;
  position: relative;
}

.course-track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none; /* Firefox */
}
.course-track::-webkit-scrollbar {
  display: none; /* Chrome, Edge, Safari */
}

.carousel-course-item {
  flex: 0 0 calc(100% / 6); /* 6 visible by default (xl) */
  transition: transform 0.3s ease;
  border-radius: 10px;
  scroll-snap-align: start;
}

.carousel-course-item img {
  width: 100%;
  border-radius: 10px;
  object-fit: cover;
  -webkit-box-shadow: 0px 4px 10px -2px #000000;
box-shadow: 0px 4px 10px -2px #000000;
}

.carousel-course-item:hover {
  transform: scale(1.05);
}

/* Arrow buttons */
.scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  border: none;
  cursor: pointer;
  z-index: 10;
  transition: background-color 0.3s;
  border-radius: 7px;
}

.scroll-btn:hover {
  background-color: rgba(0, 0, 0, 0.7);
}
.scroll-btn.left-btn {
  left: 7px;
}
.scroll-btn.right-btn {
  right: 7px;
}

#grid-container{
	padding-left: 3.5%;
	padding-right: 3.5%;
}

.grid-course-item{
  transition: transform 0.3s ease;
  border-radius: 10px;
  cursor: pointer;
}

.grid-course-item img{
  width: 100%;
  border-radius: 10px;
  object-fit: cover;
  -webkit-box-shadow: 0px 4px 10px -2px #000000;
box-shadow: 0px 4px 10px -2px #000000;
}

.grid-course-item:hover {
  transform: scale(1.05);
}

#cst-grid .grid-course-item:nth-child(n+11),
#fds-grid .grid-course-item:nth-child(n+11) {
  display: none;
}

.list-group{
	border-radius: 10px;
}

.list-group-letter{
	color: black;
}

.list-group-letter .caret {
  display: inline-block;
  transition: transform 0.25s ease;
}

.list-group-letter:not(.collapsed) .caret {
  transform: rotate(180deg);
}

.list-group-letter:hover{
	color: black;
	text-decoration: none;
}

.list-group-course span {
  color: black;
  display: inline-block;
  transition: font-size 0.2s ease-in-out;
  font-size: 1rem;
  font-weight: bold;
}

.list-group-course:hover span {
  color: #02749f;
  font-size: 1.03rem; 
  font-weight: bold;
}

.list-group-last{
	border-radius: 0 0 10px 10px;
}


/* Responsive sizing */
@media (max-width: 1400px) { /* lg screens */
  .carousel-course-item { flex: 0 0 calc(100% / 5); } /* 5 visible */
}
@media (max-width: 1200px) { /* md screens */
  .carousel-course-item { flex: 0 0 calc(100% / 4); } /* 4 visible */
}
@media (max-width: 992px) { /* sm-lg transition */
  .carousel-course-item { flex: 0 0 calc(100% / 3); } /* 3 visible */
}
@media (max-width: 768px) { /* tablets */
  .carousel-course-item { flex: 0 0 calc(100% / 2); } /* 2 visible */
}
@media (max-width: 576px) { /* phones */
  .carousel-course-item { flex: 0 0 100%; } /* 1 visible */
}