/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

/* =========================
   GraphixPro - custom.css
   Brand: #6228d7 (purple), #ee2a7b (pink)
   ========================= */

/* --- Variables --- */
:root{
  --gp-purple: #6228d7;
  --gp-pink:   #ee2a7b;
  --gp-dark:   #222;
  --gp-muted:  #6b6b6b;
  --card-radius: 12px;
  --shadow-light: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-hover: 0 8px 24px rgba(0,0,0,0.14);
}

/* --- Global typography tweaks --- */
body {
  font-family: "Istok Web", Arial, Helvetica, sans-serif;
  color: var(--gp-dark);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Headings */
h1,h2,h3,h4,h5 {
  color: var(--gp-purple);
  font-weight: 700;
  line-height: 1.25;
}

/* Smaller subtitle text */
.heading-block span,
.lead,
.small-muted {
  color: var(--gp-muted);
  font-size: 0.95rem;
}

/* --- Top bar --- */
#top-bar {
  background: linear-gradient(90deg, var(--gp-purple), var(--gp-pink));
  color: #fff;
  border-bottom: 0;
  padding: 6px 0;
}
#top-bar p { color: #fff; margin: 0; font-size: 14px; }
#top-bar a { color: #fff !important; }

/* --- Buttons --- */
/* Primary (pink) */
.btn-primary,
button.btn-primary,
a.btn-primary {
  background-color: var(--gp-pink) !important;
  border-color: var(--gp-pink) !important;
  color: #fff !important;
  padding: 10px 18px;
  border-radius: 10px;
  font-weight: 700;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.btn-primary:hover,
a.btn-primary:hover {
  background-color: #d51f6c !important;
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
  color: #fff !important;
}

/* Outline (accent purple) */
.btn-outline-dark,
a.btn-outline-dark,
button.btn-outline-dark {
  border: 2px solid var(--gp-purple) !important;
  color: var(--gp-purple) !important;
  background: transparent !important;
  border-radius: 10px;
  padding: 8px 14px;
  font-weight: 600;
  transition: all .18s ease;
}
.btn-outline-dark:hover {
  background: var(--gp-purple) !important;
  color: #fff !important;
  transform: translateY(-3px);
}

/* Small CTA (Enroll badge in header) */
#header .btn-danger {
  background: var(--gp-purple) !important;
  border-color: var(--gp-purple) !important;
  padding: 8px 12px;
  border-radius: 8px;
  font-weight:700;
}
#header .btn-danger:hover { background: var(--gp-pink) !important; border-color: var(--gp-pink) !important; }

/* --- Course Cards --- */
.course-card,
.card.course-card,
.card.course-card .card-body {
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: var(--shadow-light);
  transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease;
  border: none;
}
.course-card:hover,
.card.course-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-hover);
}

/* Card images */
.course-card .card-img-top,
.card.course-card .card-img-top {
  border-top-left-radius: var(--card-radius);
  border-top-right-radius: var(--card-radius);
  object-fit: cover;
}

/* Card title link */
.course-card .card-title a,
.card.course-card .card-title a {
  color: var(--gp-purple);
  text-decoration: none;
}
.course-card .card-title a:hover { color: var(--gp-pink); }

/* Subtitles */
.card-title-sub a { color: var(--gp-muted); text-decoration:none; }

/* --- Hero Section --- */
#home { padding: 48px 0; }
#home h1 { font-size: 36px; color: var(--gp-purple); margin-bottom: 8px; }
#home p { font-size: 16px; color: #444; max-width: 680px; }

/* Hero image styling */
#home img { border-radius: 12px; box-shadow: var(--shadow-light); }

/* --- Instructors card highlight --- */
#instructors .card {
  border-left: 5px solid var(--gp-purple);
  border-radius: 10px;
  padding: 16px;
  background: #fff;
  box-shadow: var(--shadow-light);
}
#instructors ul { list-style: disc; margin-left: 1.25rem; color: var(--gp-dark); }

/* Instructor name emphasis */
#instructors li strong { color: var(--gp-purple); font-weight:700; }

/* --- Forms --- */
.form-control {
  border-radius: 8px;
  border: 1px solid #ddd;
  padding: 10px 12px;
  box-shadow: none;
}
.form-control:focus {
  outline: none;
  border-color: var(--gp-purple);
  box-shadow: 0 6px 18px rgba(98,40,215,0.06);
}

/* Submit button in forms */
#contactForm button[type="submit"] {
  border-radius: 8px;
  padding: 10px 16px;
  font-weight:700;
}

/* --- Utility blocks / small text --- */
.small-muted { color: var(--gp-muted); font-size: 0.95rem; }

/* --- Responsive tweaks --- */
@media (max-width: 991px) {
  #home h1 { font-size: 28px; }
  .course-card .card-img-top { height: 180px; object-fit:cover; }
  #top-bar p { font-size: 13px; }
}

/* Mobile specific */
@media (max-width: 575px) {
  .course-card .card-img-top { height: 150px; }
  .heading-block h2 { font-size: 20px; }
  #home img { display: none; } /* optional: hide hero image on very small screens */
}

/* --- Footer small tweaks --- */
#footer { background: #fff; border-top: 1px solid #eee; padding-top: 18px; }
#copyrights { padding: 18px 0; color: var(--gp-muted); }

/* Accessibility: focus states */
a:focus, button:focus, input:focus, textarea:focus {
  outline: 3px solid rgba(98,40,215,0.14);
  outline-offset: 2px;
}

/* Thin underline with brand color for links in content */
a { text-decoration: none; border-bottom: 2px solid transparent; transition: all .16s ease; }
a:hover { border-bottom-color: var(--gp-pink); color: var(--gp-pink); }

/* --- Small banners / notices --- */
.notice {
  background: linear-gradient(90deg, rgba(98,40,215,0.06), rgba(238,42,123,0.04));
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid rgba(98,40,215,0.06);
  color: var(--gp-dark);
}

/* End of custom.css */