/* ==============================
   Global Color Variables
   ============================== */
:root {
  /* Brand Colors */
  --color-primary: #7a10f8;    /* Main accent (buttons, nav, hero) */
  --color-secondary: #6c757d;  /* Neutral or secondary text */
  --color-tertiary: #565656;   /* Optional highlight/accent */

  /* Background Colors */
  --bg-primary: #ffffff;       /* Main site background */
  --bg-secondary: #f8f9fa;     /* Light section background */
  --bg-tertiary: #e9ecef;      /* Alternate section background */
  --bg-cta: #7a10f8;      	   /* Call to Action */
	
  /* Text Colors */
  --text-light: #ffffff;       /* Main site text */
  --text-dark: #000000;        /* Alternative text */
}


/* ==============================
   Base Styles
   ============================== */
body {
  background-color: var(--bg-primary);
  color: var(--color-secondary);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-primary);
  font-weight: 700;
}

html {
  scroll-padding-top: 120px; /* adjust to your navbar height */
}

.bg-none {
  background-color: var(--bg-primary);
}
.bg-accent {
  background-color: var(--bg-secondary);
}

.btn-primary {
  background-color: var(--color-primary);
  border: 2px solid var(--color-primary);
  color: #fff;
  font-weight: 600;
  padding: 0.6rem 1.25rem;
  border-radius: 0.5rem;
  transition: all 0.2s ease-in-out;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--color-tertiary);
  border-color: var(--color-tertiary);
  color: #fff;
}


.btn-secondary {
  background-color: var(--color-secondary);
  border: 2px solid var(--color-secondary);
  color: #fff;
  font-weight: 600;
  padding: 0.6rem 1.25rem;
  border-radius: 0.5rem;
  transition: all 0.2s ease-in-out;
}

.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--color-tertiary);
  border-color: var(--color-tertiary);
  color: #fff;
}

.btn-third {
  background-color: #fff;
  border: 2px solid #e0e0e0; /* light grey border */
  color: var(--color-primary);
  font-weight: 600;
  padding: 0.6rem 1.25rem;
  border-radius: 0.5rem;
  transition: all 0.2s ease-in-out;
}

.btn-third:hover,
.btn-third:focus {
  background-color: #f5f5f5; /* light grey hover */
  border-color: #d0d0d0;
  color: var(--color-primary);
}


.btn-fourth {
  background-color: #e0e0e0; /* light grey base */
  border: 2px solid #e0e0e0;
  color: #000;
  font-weight: 600;
  padding: 0.6rem 1.25rem;
  border-radius: 0.5rem;
  transition: all 0.2s ease-in-out;
}

.btn-fourth:hover,
.btn-fourth:focus {
  background-color: #cfcfcf; /* slightly darker grey */
  border-color: #cfcfcf;
  color: #000;
}



/* ==============================
   Notification Bar
   ============================== */

.notification-bar {
  background: var(--color-primary);
  color: var(--text-light);
  text-align:center;
  padding:8px 0;
  font-weight:600;
}

/* ==============================
   Navigation Bar
   ============================== */

.navbar {
  background-color: var(--bg-primary);
  padding-top: 1rem;   /* increase vertical padding */
  padding-bottom: 1rem;
}

.navbar-brand {
  font-size: 1.4rem;   /* larger brand/logo text if text-based */
  font-weight: 700;    /* bolder brand text */
}

.navbar .nav-link {
  color: var(--color-primary);
  font-size: 1.15rem;   /* increase link font size */
  font-weight: 600;    /* semi-bold weight */
  padding-left: 1.45rem !important;  /* wider horizontal spacing between links */
  padding-right: 1.15rem !important;
  transition: color 0.2s ease-in-out;
}

.navbar .nav-link:hover {
  color: var(--color-secondary);
}

.navbar-brand img {
  max-height: 90px;
  width: auto;
}


/* ==============================
   Hero Section
   ============================== */

#hero {
  color: var(--color-primary);
  padding: 6rem 0;
  text-align: center;
}

#hero h1 {
  color: var(--color-primary);
}

#hero h4 {
  color: var(--color-secondary);
}

#hero .btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

#hero .btn-primary:hover {
  background-color: var(--color-tertiary);
  border-color: var(--color-tertiary);
}

.hero-section {
  background:url('https://placehold.co/1920x600') center center/cover no-repeat;
  color:#fff;
  text-align:center;
  padding:120px 20px;
}

.hero-section h1 {
  font-size:3rem;
  font-weight:700;
}


/* ==============================
   About (Split) Section
   ============================== */
#split-section {
  padding: 60px 0;
}

#split-section h3 {
  color: var(--color-primary);
}



/* ==============================
   About (Extension) Section
   ============================== */
#about,
#about-extension {
  padding: 50px 0;
}

#about h3,
#about-extension h3 {
  color: var(--color-primary);
}



























.split-section img,
.fifty-section img {
  width:100%;
  border-radius:8px;
}

.widget-box {
  background:#f8f9fa;
  border-radius:8px;
  padding:30px;
  text-align:center;
  transition:transform .2s;
}
.widget-box:hover {
  transform:translateY(-5px);
}

.schedule-item {
  background:#f8f9fa;
  padding:20px;
  border-radius:8px;
  margin-bottom:20px;
}

.instagram-gallery img {
  width:100%;
  height:auto;
  border-radius:8px;
}

.sponsor-logo img {
  max-width:150px;
  margin:15px auto;
  display:block;
  transition:transform .2s;
}
.sponsor-logo img:hover {
  transform:scale(1.05);
}

.cta-banner {
  color:#fff;
  padding:60px 20px;
  text-align:center;
}
.cta-banner h2 {
  font-size:2.5rem;
  margin-bottom:20px;
}
.cta-banner p {
  max-width:700px;
  margin:0 auto 30px;
}

.social-links a {
  margin:0 10px;
  font-size:1.5rem;
  color:#333;
  transition:color .2s;
}
.social-links a:hover {
  color:#0d6efd;
}

footer {
  background:#212529;
  color:#bbb;
  padding:20px 0;
}
footer a {
  color:#bbb;
  text-decoration:none;
  margin:0 10px;
  cursor:pointer;
}
footer a:hover {
  color:#fff;
}

/* Event Date Styling */
#schedule .event-date {
  background-color: #343a40; /* dark background */
  color: #fff;
  padding: 15px 0;
  border-radius: 6px;
  display: inline-block;
  width: 90px;
}
#schedule .event-date .month {
  display: block;
  font-size: 1rem;
  text-transform: uppercase;
}
#schedule .event-date .day {
  display: block;
  font-size: 2rem;
  font-weight: bold;
  line-height: 1;
}
#schedule .event-date .year {
  display: block;
  font-size: 0.9rem;
}

/* Tighten spacing inside schedule details */
#schedule .card-body p {
  margin-bottom: 0.35rem;
  line-height: 1.3;
}