/* ================= GENERAL BODY ================= */
body {
  font-family: Arial, sans-serif;
  background: linear-gradient(135deg, #001f3f 0%, #a4b6c8 100%); /* nicer dark blue gradient background */
  color: #fff;
  margin: 0;
  padding: 0;
}

/* ================= HEADER ================= */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  background-color: #00264d; /* dark blue header */
}

.site-header .logo img {
  max-width: 200px;

}

/* ================= NAVIGATION ================= */
.main-nav a {
  color: #99ccff; /* light blue links */
  text-decoration: none;
  margin: 0 10px;
  transition: color 0.3s;
}

.main-nav a:hover,
.main-nav a.active {
  color: gold;
  text-decoration: underline;
}

/* ================= CONTAINER ================= */
.container {
  padding: 20px;
}

/* ================= SEARCH ================= */
#courseSearch {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  font-size: 1rem;
  border-radius: 6px;
  border: 1px solid #ccc;
}

/* ================= COURSE GRID ================= */
.course-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 cards per row desktop */
  gap: 15px;
  margin-bottom: 30px;
}


/* ================= H2 ANIMATION ================= */
.colorful-heading {
  font-size: 2.5em;
  font-weight: bold;
  text-align: center;
  animation: colorCycle 15s linear infinite; /* smooth infinite color change */
}

/* Keyframes for multiple color changes */
@keyframes colorCycle {
  0%   { color: #FF6B6B; }   /* Bright Coral */
  7%   { color: #6BCB77; }   /* Soft Green */
  14%  { color: #4D96FF; }   /* Vivid Blue */
  21%  { color: #FFD93D; }   /* Sunny Yellow */
  28%  { color: #FF6EC7; }   /* Pink Magenta */
  35%  { color: #563276; }   /* Elegant Purple */
  42%  { color: #F67280; }   /* Warm Rose */
  49%  { color: #C06C84; }   /* Dusty Pink */
  56%  { color: #355C7D; }   /* Deep Blue */
  63%  { color: #F8B195; }   /* Soft Peach */
  70%  { color: #F9ED69; }   /* Light Yellow */
  77%  { color: #00C9A7; }   /* Mint Green */
  84%  { color: #FF7F50; }   /* Coral Orange */
  91%  { color: #845EC2; }   /* Vibrant Violet */
  100% { color: #FF9F1C; }   /* Bright Orange */
}
/* ================= COURSE CARDS ================= */
.course-card {
  background-color: #003366; /* card dark blue */
  color: rgb(237, 237, 134);
  padding: 15px;
  border-radius: 8px;
  border: 2px solid #99ccff; /* light blue border */
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

.course-card .course-title {
  margin: 0;
  z-index: 2;
  position: relative;
  transition: color 0.3s;
}

/* Hover effect: feather gradient + darker blue behind */
.course-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgb(203, 197, 164) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  border-radius: 8px;
  z-index: 1;
}

.course-card:hover::before {
  opacity: 0.7;
}

.course-card:hover {
  background-color: #00264d; /* darker blue hover */
}

.course-card {
  display: block;        /* Makes the entire card clickable */
  text-decoration: none; /* Removes underline */
  color: inherit;        /* Keeps text color as normal */
}



.course-card a.course-link:hover {
  text-decoration: none;    /* no underline on hover */
}



.course-card {
  cursor: pointer; /* shows pointer on hover */
}

/* Course description color */
.course-card .course-desc {
  color: #B0E0E6;  /* light blue / powder blue for contrast on dark background */
  font-size: 0.95rem;
  line-height: 1.4;
}

.course-card:hover .course-desc {
  color: #E0FFFF;  /* lighter cyan when hovering the card */
}

/* ================= HIGHLIGHT ================= */
mark {
  background: gold;
  color: #000;
  padding: 0 3px;
  border-radius: 2px;
}

/* ================= GO TO TOP BUTTON ================= */
#goTopBtn {
  position: fixed;
  bottom: 80px;
  right: 20px;
  display: none;
  z-index: 999;
  padding: 10px 14px;
  font-size: 18px;
  border: none;
  border-radius: 50%;
  background-color: gold;
  color: #000;
  cursor: pointer;
  transition: background 0.3s;
}

#goTopBtn:hover {
  background-color: yellow;
}

/* ================= FOOTER ================= */
.site-footer {
  background-color: #00264d; /* dark blue footer */
  color: #fff;
  text-align: center;
  padding: 15px;
}

.social-icons {
  text-align: center;
  margin-top: 10px;
}

.social-icons a {
  color: #99ccff; /* light blue social links */
  margin: 0 8px;
  font-size: 1.5rem;
  text-decoration: none;
  transition: color 0.3s;
}

.social-icons a:hover {
  color: gold;
}

/* ================= RESPONSIVE ================= */

/* Tablet: 2 cards per row */
@media (max-width: 1024px) {
  .course-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile: 1 card per row, full screen width */
/* ================= SMALL DEVICES (MOBILE) ================= */
@media (max-width: 768px) {
  .course-grid {
    grid-template-columns: 1fr;    /* single column */
    justify-items: center;         /* center items in grid */
  }
  .course-card {
    width: 90%;                    /* take 90% of container width */
    max-width: 90%;                /* prevent overflow */
    margin: 0 auto;                /* center horizontally */
  }
}



/* Small phones: adjust nav font */
@media (max-width: 480px) {
  .main-nav a {
    font-size: 0.85rem;
  }
}