body { padding-top: 56px; }
.left-aligned { margin-left: auto; }
.bg-dark { background-color: #343a40 !important; }
.bg-hero { background-color: #45b06cff; }

<<<<<<< HEAD
=======
<<<<<<< HEAD
>>>>>>> 07cb2f265f71ea6189cf81f64ba539cd97945fe7
/* Purple theme styles */
purple-theme {
  background: linear-gradient(135deg, #2c1a4d 0%, #1a1a2e 50%, #000000 100%);
  background-attachment: fixed;
  color: #f0e6ff;
  min-height: 100vh;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.card-purple {
  background: rgba(26, 13, 46, 0.7);
  border-radius: 15px;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(108, 64, 164, 0.3) !important;
  color: #f0e6ff;
}

.card-purple h1, .card-purple h2 {
  color: #e6d9ff;
  border-bottom: 2px solid #8d66c5;
  padding-bottom: 15px;
  margin-bottom: 30px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  font-weight: 700;
}

.card-purple h4 {
  color: #d8b6ff;
  margin-top: 35px;
  padding: 10px 0 10px 20px;
  border-left: 5px solid #8d66c5;
  background: rgba(108, 64, 164, 0.15);
  border-radius: 0 8px 8px 0;
  font-weight: 600;
}

.card-purple p {
  line-height: 1.8;
  margin-bottom: 20px;
  text-align: justify;
  font-size: 1.05rem;
}

.btn-purple {
  background: linear-gradient(90deg, #6c40a4 0%, #8d66c5 100%);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 12px 25px;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(108, 64, 164, 0.3);
}

.btn-purple:hover {
  background: linear-gradient(90deg, #8d66c5 0%, #6c40a4 100%);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(108, 64, 164, 0.5);
  color: white;
}

/* Animation classes */
.fade-in-element {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-element.animate {
  opacity: 1;
  transform: translateY(0);
}

.slide-in-element {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.slide-in-element.animate {
  opacity: 1;
  transform: translateX(0);
}

.zoom-in-element {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.zoom-in-element.animate {
  opacity: 1;
  transform: scale(1);
}

<<<<<<< HEAD
=======
=======
>>>>>>> af680726055c52d263b4ab81c79f01f445c2db16
>>>>>>> 07cb2f265f71ea6189cf81f64ba539cd97945fe7
/* CALLOUT */
.bd-callout { padding:1.25rem; margin-top:1.25rem; margin-bottom:1.25rem; border:1px solid #e9ecef; border-left-width:.25rem; border-radius:.25rem }
.bd-callout h4 { margin-bottom: 1.25rem }
.bd-callout p:last-child { margin-bottom:0 }
.bd-callout code { border-radius:.25rem }
.bd-callout+.bd-callout { margin-top:-.25rem }
.bd-callout-info { border-left-color:#5bc0de }
.bd-callout-warning { border-left-color:#f0ad4e }
.bd-callout-danger { border-left-color:#d9534f }

/* footer */
footer a { color: white; font-weight: bold; text-decoration: none; }
footer a:hover { color: white; text-decoration: underline; }
<<<<<<< HEAD
=======
<<<<<<< HEAD
>>>>>>> 07cb2f265f71ea6189cf81f64ba539cd97945fe7

.fixed-left {
  position: fixed;
  top: 100px;
  height: 100vh;
  overflow-y: auto;
}
<<<<<<< HEAD
=======
=======
>>>>>>> af680726055c52d263b4ab81c79f01f445c2db16
>>>>>>> 07cb2f265f71ea6189cf81f64ba539cd97945fe7