body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f7f7f7;
  color: #333;
  line-height: 1.6;
}

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px;
}

.main-header {
  background-color: #4A148C; /* A professional purple */
  color: white;
  padding: 20px 0;
  text-align: center;
  margin-bottom: 30px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.main-header .container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo {
  max-height: 50px;
  margin-right: 20px;
}

.guide-section {
  background-color: white;
  padding: 30px;
  margin-bottom: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s ease-out forwards;
}

.step {
  border-left: 5px solid #4A148C;
  padding-left: 25px;
}
p {
  font-size: 20px;
}

h2, h3 {
  color: #4A148C;
  margin-top: 0;
  margin-bottom: 15px;
}

ol {
  padding-left: 25px;
}

li {
  margin-bottom: 10px;
}


.email {
  font-weight: bold;
  color: #007bff;
}

.image-placeholder {
  text-align: center;
  margin: 20px 0;
  border: 1px dashed #ccc;
  padding: 15px;
  border-radius: 5px;
}

.image-placeholder img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 10px;
}

.caption {
  font-size: 0.9em;
  color: #777;
}

.checkmark-animation {
  width: 60px;
  height: 60px;
  margin: 20px auto;
  border-radius: 50%;
  border: 4px solid #4CAF50;
  position: relative;
  opacity: 0;
  animation: checkmark 1s ease-out 0.5s forwards;
}

.checkmark-animation::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%) rotate(-45deg);
  width: 20px;
  height: 35px;
  border-bottom: 4px solid #4CAF50;
  border-right: 4px solid #4CAF50;
  opacity: 0;
  animation: drawCheck 0.6s ease-out 1s forwards;
}

.admin-panel {
  background-color: #f0f0f0;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
  border-top: 3px solid #4A148C;
}

.admin-panel h3 {
  color: #4A148C;
  margin-top: 0;
  margin-bottom: 10px;
}

.admin-panel ul {
  list-style: none;
  padding: 0;
}

.admin-panel ul li {
  margin-bottom: 8px;
}

.admin-panel ul li a {
  text-decoration: none;
  color: #007bff;
  transition: color 0.3s ease;
}

.admin-panel ul li a:hover {
  color: #0056b3;
}

.main-footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 15px 0;
  border-radius: 5px;
}

/* Existing CSS rules */

/* Keyframe animations */
@keyframes fadeUp {
  from {
      opacity: 0;
      transform: translateY(20px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

@keyframes checkmark {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes drawCheck {
  to { opacity: 1; }
}

/* Success message styling */
.success-message {
  background-color: #e9fae5;
  color: #28a745;
  padding: 15px;
  border-radius: 5px;
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.5s ease-in-out forwards;
}

.checkmark-container {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.checkmark__circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 2;
  stroke: #28a745;
  fill: none;
  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark__check {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  stroke-width: 2;
  stroke: #28a745;
  fill: none;
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
  to {
      stroke-dashoffset: 0;
  }
}

/* Animations */
@keyframes fadeUp {
  from {
      opacity: 0;
      transform: translateY(20px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

@keyframes checkmark {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes drawCheck {
  to { opacity: 1; }
}
.content {
  /* Other styles */
  animation: fadeUp 0.5s ease-in-out;
}

.checkmark-icon {
  /* Other styles for the checkmark */
  animation: checkmark 0.3s ease-out forwards;
}

.checkmark-path {
  /* Styles for the checkmark path (e.g., using SVG) */
  opacity: 0; /* Initially hidden */
  animation: drawCheck 0.7s ease-in forwards 0.3s; /* Start after the checkmark scales */
}

/* General styling for guide sections */
.guide-section {
  margin-bottom: 2rem;
}

/* Bold email text */
.email {
  font-weight: bold;
}

/* Success message styling */
.success-message {
  text-align: center;
  margin-top: 1rem;
}

/* Checkmark container */
.checkmark-container {
  width: 52px;
  height: 52px;
}

/* Checkmark circle */
.checkmark__circle {
  stroke: #7ac142;
  stroke-width: 2;
}

/* Checkmark check */
.checkmark__check {
  stroke: #7ac142;
  stroke-width: 2;
}

/* Hidden class for toggling content */
.hidden {
  display: none;
}