.tp-megamenu-banner img {
width: 100%;
height: auto;
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}
.video-explorer {
           max-width: 1200px;
           margin: 0 auto;
           padding: 0 15px;
       }

       .section-title {
           text-align: center;
           margin-bottom: 3rem;
       }

       .section-title h2 {
           font-size: 2.5rem;
           font-weight: bold;
           color: var(--dark-gray);
       }

       .section-title .highlight {
           color: var(--primary-red);
       }

       .section-subtitle {
           color: #6B7280;
           font-size: 1.1rem;
           margin-top: 0.5rem;
       }

       .video-grid {
           display: grid;
           grid-template-columns: 1fr 2fr;
           gap: 2rem;
           margin-bottom: 3rem;
       }

       .video-list {
           background: white;
           border-radius: 12px;
           box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
           overflow: hidden;
           height: fit-content;
       }

       .video-list-header {
           background: #003091;
           color: white;
           padding: 1rem 1.5rem;
           font-weight: bold;
           font-size: 1.1rem;
       }

       .video-item {
           display: flex;
           align-items: center;
           padding: 1rem 1.5rem;
           border-bottom: 1px solid #E5E7EB;
           cursor: pointer;
           transition: all 0.3s ease;
       }

       .video-item:hover {
           background-color: #F9FAFB;
           transform: translateX(5px);
       }

       .video-item.active {
           background-color: #FEF2F2;
           border-left: 4px solid var(--primary-red);
       }

       .video-thumbnail {
           width: 80px;
           height: 60px;
           border-radius: 8px;
           object-fit: cover;
           margin-right: 1rem;
           position: relative;
       }

       .video-info {
           flex: 1;
       }

       .video-title {
           font-weight: 600;
           color: var(--dark-gray);
           margin-bottom: 0.25rem;
           font-size: 0.9rem;
           line-height: 1.3;
       }

       .video-duration {
           color: #6B7280;
           font-size: 0.8rem;
       }

       .video-player {
           background: white;
           border-radius: 12px;
           box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
           overflow: hidden;
           position: sticky;
           top: 2rem;
       }

       .video-player-header {
           background: #003090;
           color: white;
           padding: 1rem 1.5rem;
           font-weight: bold;
       }

       .video-container {
           position: relative;
           width: 100%;
           height: 0;
           padding-bottom: 56.25%; /* 16:9 aspect ratio */
       }

       .video-container iframe {
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
       }

       .video-details {
           padding: 1.5rem;
       }

       .current-video-title {
           font-size: 1.1rem;
           font-weight: bold;
           color: var(--dark-gray);
           margin-bottom: 0.5rem;
       }

       .current-video-duration {
           color: #6B7280;
           font-size: 0.9rem;
       }

       .play-icon {
           position: absolute;
           top: 50%;
           left: 50%;
           transform: translate(-50%, -50%);
           color: white;
           font-size: 1.2rem;
           opacity: 0.9;
       }

       .youtube-link {
           background: var(--primary-red);
           color: white;
           padding: 0.75rem 1.5rem;
           border-radius: 25px;
           text-decoration: none;
           font-weight: bold;
           display: inline-flex;
           align-items: center;
           gap: 0.5rem;
           margin-top: 2rem;
           transition: all 0.3s ease;
       }

       .youtube-link:hover {
           background: var(--dark-red);
           color: white;
           transform: translateY(-2px);
       }

       .category-badge {
           background: #E5E7EB;
           color: var(--dark-gray);
           padding: 0.25rem 0.75rem;
           border-radius: 15px;
           font-size: 0.8rem;
           font-weight: 500;
       }

       @media (max-width: 768px) {
           .video-grid {
               grid-template-columns: 1fr;
               gap: 1rem;
           }

           .stat-number {
               font-size: 2rem;
           }

           .section-title h2 {
               font-size: 2rem;
           }
       }
       /* Demo content */
              .demo-content {
                  max-width: 800px;
                  margin: 0 auto;
                  padding: 40px 20px;
                  background: white;
                  border-radius: 20px;
                  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
              }

              .demo-content h1 {
                  color: #2c3e50;
                  margin-bottom: 20px;
                  font-size: 2.5em;
                  text-align: center;
              }

              .demo-content p {
                  margin-bottom: 15px;
                  color: #555;
                  font-size: 1.1em;
              }

              /* Floating Buttons Container */
              /* Floating Buttons Container */
        .floating-buttons {
            position: fixed;
            top: 50%; /* Center vertically */
            right: 30px; /* Adjust this value as needed */
            display: flex;
            flex-direction: column;
            gap: 15px;
            z-index: 1000;
            transform: translateY(-50%); /* This ensures perfect vertical centering */
        }

              /* Base Floating Button Styles */
              .floating-btn {
                  width: 60px;
                  height: 60px;
                  border-radius: 50%;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  cursor: pointer;
                  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                  border: none;
                  outline: none;
                  color: white;
                  position: relative;
                  backdrop-filter: blur(10px);
                  overflow: visible;
              }

              .floating-btn i {
                  font-size: 24px;
                  transition: transform 0.3s ease;
                  z-index: 1;
              }

              .floating-btn.active i {
                  transform: rotate(45deg);
              }

              /* Tooltip Styles */
              .floating-btn::before {
                  content: attr(data-tooltip);
                  position: absolute;
                  right: 75px;
                  top: 50%;
                  transform: translateY(-50%);
                  background: rgba(0, 0, 0, 0.9);
                  color: white;
                  padding: 8px 12px;
                  border-radius: 8px;
                  font-size: 14px;
                  font-weight: 500;
                  white-space: nowrap;
                  opacity: 0;
                  visibility: hidden;
                  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                  pointer-events: none;
                  z-index: 10001;
                  backdrop-filter: blur(10px);
                  border: 1px solid rgba(255, 255, 255, 0.1);
              }

              .floating-btn::after {
                  content: '';
                  position: absolute;
                  right: 65px;
                  top: 50%;
                  transform: translateY(-50%);
                  border-left: 8px solid rgba(0, 0, 0, 0.9);
                  border-top: 8px solid transparent;
                  border-bottom: 8px solid transparent;
                  opacity: 0;
                  visibility: hidden;
                  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                  pointer-events: none;
                  z-index: 10001;
              }

              .floating-btn:hover::before,
              .floating-btn:hover::after {
                  opacity: 1;
                  visibility: visible;
                  transform: translateY(-50%) translateX(-5px);
              }

              /* Admission Button */
              .floating-admission {
                  background: linear-gradient(135deg, #FF6B6B, #FF8E53);
                  box-shadow: 0 8px 25px rgba(255, 107, 107, 0.4);
              }

              .floating-admission:hover {
                  transform: scale(1.15) translateY(-3px);
                  box-shadow: 0 15px 35px rgba(255, 107, 107, 0.6);
              }

              /* Contact Button */
              .floating-contact {
                  background: linear-gradient(135deg, #bdcc36, #d1e14a);
                  box-shadow: 0 8px 25px rgba(189, 204, 54, 0.4);
              }

              .floating-contact:hover {
                  transform: scale(1.15) translateY(-3px);
                  box-shadow: 0 15px 35px rgba(189, 204, 54, 0.6);
              }

              /* WhatsApp Button */
              .floating-whatsapp {
                  background: linear-gradient(135deg, #25D366, #128C7E);
                  box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4);
              }

              .floating-whatsapp:hover {
                  transform: scale(1.15) translateY(-3px);
                  box-shadow: 0 15px 35px rgba(37, 211, 102, 0.6);
              }

              /* Certificate Button */
              .floating-certificate {
                  background: linear-gradient(135deg, #2196F3, #42A5F5);
                  box-shadow: 0 8px 25px rgba(33, 150, 243, 0.4);
              }

              .floating-certificate:hover {
                  transform: scale(1.15) translateY(-3px);
                  box-shadow: 0 15px 35px rgba(33, 150, 243, 0.6);
              }

              /* Panel Base Styles */
              .floating-panel {
                  position: fixed;
                  top:28%;
                  left:33%;
                  background: white;
                  border-radius: 20px;
                  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
                  z-index: 10000;
                  transform: scale(0.8) translateY(20px);
                  transform-origin: bottom right;
                  opacity: 0;
                  visibility: hidden;
                  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
                  backdrop-filter: blur(20px);
                  border: 1px solid rgba(255, 255, 255, 0.2);
              }

              .floating-panel.active {
                  transform: scale(1) translateY(0);
                  opacity: 1;
                  visibility: visible;
              }

              /* Admission Panel Styles */
              .admission-panel {
                  width: 450px;
                  max-height: 80vh;
                  overflow-y: auto;
              }

              .admission-panel .panel-header {
                  background: linear-gradient(135deg, #FF6B6B, #FF8E53);
              }

              /* Contact Panel Styles */
              .contact-panel {
                  width: 350px;
              }

              .contact-panel .panel-header {
                  background: linear-gradient(135deg, #bdcc36, #d1e14a);
              }

              /* Certificate Panel Styles */
              .certificate-panel {
                  width: 400px;
              }

              .certificate-panel .panel-header {
                  background: linear-gradient(135deg, #003092, #00879E);
              }

              /* WhatsApp Panel Styles */
              .whatsapp-panel {
                  width: 380px;
              }

              .whatsapp-panel .panel-header {
                  background: linear-gradient(135deg, #25D366, #128C7E);
              }

              .panel-header {
                  color: white;
                  padding: 25px;
                  border-radius: 20px 20px 0 0;
                  position: relative;
                  backdrop-filter: blur(20px);
              }

              .panel-title {
                  font-size: 22px;
                  font-weight: 700;
                  margin: 0;
                  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
                  color:#f8f8f8;
              }

              .close-panel {
                  position: absolute;
                  top: 20px;
                  right: 20px;
                  background: rgba(255, 255, 255, 0.2);
                  border: none;
                  color: white;
                  width: 35px;
                  height: 35px;
                  border-radius: 50%;
                  cursor: pointer;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  font-size: 16px;
                  transition: all 0.3s ease;
                  backdrop-filter: blur(10px);
              }

              .close-panel:hover {
                  background: rgba(255, 255, 255, 0.3);
                  transform: scale(1.1);
              }

              .panel-content {
                  padding: 25px;
              }

              .contact-item {
                  display: flex;
                  align-items: flex-start;
                  margin-bottom: 20px;
                  padding: 15px;
                  border-radius: 12px;
                  transition: all 0.3s ease;
                  background: rgba(189, 204, 54, 0.05);
              }

              .contact-item:hover {
                  background: rgba(189, 204, 54, 0.1);
                  transform: translateX(5px);
              }

              .contact-item:last-child {
                  margin-bottom: 0;
              }

              .contact-item i {
                  margin-right: 15px;
                  color: #bdcc36;
                  font-size: 18px;
                  width: 25px;
                  text-align: center;
                  margin-top: 3px;
                  flex-shrink: 0;
              }

              .contact-item-content {
                  flex: 1;
              }

              .contact-item a {
                  color: #333;
                  text-decoration: none;
                  transition: color 0.3s ease;
                  display: block;
                  margin-bottom: 5px;
                  font-weight: 500;
              }

              .contact-item a:hover {
                  color: #bdcc36;
              }

              .contact-item span {
                  color: #666;
                  font-size: 15px;
                  line-height: 1.5;
              }

              /* Admission Form Styles */
              .admission-form {
                  padding: 25px;
              }

              .form-row {
                  display: flex;
                  gap: 15px;
                  margin-bottom: 20px;
              }

              .form-row .form-group {
                  flex: 1;
                  margin-bottom: 0;
              }

              .form-group {
                  margin-bottom: 20px;
              }

              .form-label {
                  display: block;
                  margin-bottom: 8px;
                  font-weight: 600;
                  color: #333;
                  font-size: 14px;
              }

              .form-input,
              .form-select,
              .form-textarea {
                  width: 100%;
                  padding: 12px 15px;
                  border: 2px solid #e0e0e0;
                  border-radius: 10px;
                  font-size: 14px;
                  transition: all 0.3s ease;
                  outline: none;
                  background: rgba(255, 255, 255, 0.8);
                  font-family: inherit;
              }

              .form-input:focus,
              .form-select:focus,
              .form-textarea:focus {
                  border-color: #FF6B6B;
                  box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.1);
                  background: white;
              }

              .form-textarea {
                  resize: vertical;
                  min-height: 80px;
              }

              .form-checkbox {
                  display: flex;
                  align-items: flex-start;
                  gap: 10px;
                  margin-bottom: 20px;
              }

              .form-checkbox input[type="checkbox"] {
                  width: 18px;
                  height: 18px;
                  accent-color: #FF6B6B;
                  margin-top: 2px;
              }

              .form-checkbox label {
                  font-size: 14px;
                  color: #666;
                  line-height: 1.4;
                  cursor: pointer;
              }

              .submit-btn {
                  width: 100%;
                  padding: 15px 25px;
                  background: linear-gradient(135deg, #FF6B6B, #FF8E53);
                  color: white;
                  border: none;
                  border-radius: 12px;
                  font-size: 16px;
                  font-weight: 600;
                  cursor: pointer;
                  transition: all 0.3s ease;
                  text-transform: uppercase;
                  letter-spacing: 0.5px;
              }

              .submit-btn:hover {
                  transform: translateY(-3px);
                  box-shadow: 0 10px 25px rgba(255, 107, 107, 0.4);
              }

              .submit-btn:active {
                  transform: translateY(-1px);
              }

              .submit-btn:disabled {
                  opacity: 0.7;
                  cursor: not-allowed;
                  transform: none;
              }

              /* Certificate Form Styles */
              .certificate-form {
                  padding: 25px;
              }

              .verify-btn {
                  width: 100%;
                  padding: 15px 25px;
                  background: linear-gradient(135deg, #003092, #00879E);
                  color: white;
                  border: none;
                  border-radius: 12px;
                  font-size: 16px;
                  font-weight: 600;
                  cursor: pointer;
                  transition: all 0.3s ease;
                  text-transform: uppercase;
                  letter-spacing: 0.5px;
              }

              .verify-btn:hover {
                  transform: translateY(-3px);
                  box-shadow: 0 10px 25px rgba(33, 150, 243, 0.4);
              }

              .verify-btn:active {
                  transform: translateY(-1px);
              }

              /* WhatsApp specific styles */
              .whatsapp-intro {
                  padding: 25px;
                  text-align: center;
                  border-bottom: 1px solid #f0f0f0;
                  background: rgba(37, 211, 102, 0.05);
              }

              .whatsapp-intro h3 {
                  font-size: 24px;
                  font-weight: 700;
                  margin: 0 0 10px 0;
                  color: #25D366;
              }

              .whatsapp-intro p {
                  font-size: 15px;
                  color: #666;
                  margin: 0;
              }

              .whatsapp-contacts {
                  padding: 0;
                  max-height: 400px;
                  overflow-y: auto;
              }

              .whatsapp-contact {
                  display: flex;
                  align-items: center;
                  padding: 20px 25px;
                  border-bottom: 1px solid #f0f0f0;
                  cursor: pointer;
                  transition: all 0.3s ease;
                  text-decoration: none;
                  color: inherit;
              }

              .whatsapp-contact:hover {
                  background: rgba(37, 211, 102, 0.1);
                  transform: translateX(5px);
              }

              .whatsapp-contact:last-child {
                  border-bottom: none;
              }

              .whatsapp-avatar {
                  width: 55px;
                  height: 55px;
                  border-radius: 50%;
                  overflow: hidden;
                  margin-right: 18px;
                  flex-shrink: 0;
                  border: 3px solid #25D366;
                  transition: transform 0.3s ease;
              }

              .whatsapp-contact:hover .whatsapp-avatar {
                  transform: scale(1.1);
              }

              .whatsapp-avatar img {
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
              }

              .whatsapp-contact-info {
                  flex: 1;
              }

              .whatsapp-name {
                  font-weight: 600;
                  font-size: 17px;
                  color: #333;
                  margin-bottom: 4px;
                  display: block;
              }

              .whatsapp-label {
                  font-size: 14px;
                  color: #666;
                  display: block;
              }

              .whatsapp-status {
                  width: 15px;
                  height: 15px;
                  background: linear-gradient(135deg, #25D366, #128C7E);
                  border-radius: 50%;
                  margin-left: 15px;
                  flex-shrink: 0;
                  box-shadow: 0 0 10px rgba(37, 211, 102, 0.5);
                  animation: pulse 2s infinite;
              }

              @keyframes pulse {
                  0% { box-shadow: 0 0 10px rgba(37, 211, 102, 0.5); }
                  50% { box-shadow: 0 0 20px rgba(37, 211, 102, 0.8); }
                  100% { box-shadow: 0 0 10px rgba(37, 211, 102, 0.5); }
              }

              .whatsapp-footer {
                  padding: 20px 25px;
                  background: rgba(37, 211, 102, 0.05);
                  border-top: 1px solid #e0e0e0;
                  text-align: center;
                  font-size: 13px;
                  color: #666;
                  border-radius: 0 0 20px 20px;
                  font-weight: 500;
              }

              /* Backdrop for mobile */
              .backdrop {
                  position: fixed;
                  top: 0;
                  left: 0;
                  width: 100%;
                  height: 100%;
                  background: rgba(0, 0, 0, 0.4);
                  z-index: 9999;
                  opacity: 0;
                  visibility: hidden;
                  transition: all 0.3s ease;
                  backdrop-filter: blur(5px);
              }

              .backdrop.active {
                  opacity: 1;
                  visibility: visible;
              }

              /* Mobile Responsive */
              @media (max-width: 480px) {
                  .floating-buttons {
                      right: 20px;
                      bottom: 20px;
                  }

                  .floating-panel {
                      width: calc(100vw - 40px);
                      left:0%;
                      transform-origin: bottom center;
                      max-height: 50vh;
                  }

                  .contact-panel,
                  .certificate-panel,
                  .whatsapp-panel,
                  .admission-panel {
                      width: 100%;
                  }

                  .form-row {
                      flex-direction: column;
                      gap: 0;
                  }

                  .form-row .form-group {
                      margin-bottom: 20px;
                  }

                  .floating-btn::before {
                      right: 70px;
                      font-size: 12px;
                      padding: 6px 10px;
                  }

                  .floating-btn::after {
                      right: 62px;
                      border-left-width: 6px;
                      border-top-width: 6px;
                      border-bottom-width: 6px;
                  }
              }

              /* Animation for panel entrance */
              @keyframes panelSlideIn {
                  from {
                      opacity: 0;
                      transform: scale(0.8) translateY(30px);
                  }
                  to {
                      opacity: 1;
                      transform: scale(1) translateY(0);
                  }
              }

              .floating-panel.active {
                  animation: panelSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
              }

      		.floating-tooltip {
          position: absolute;
          background-color: #333;
          color: white;
          padding: 8px 12px;
          border-radius: 4px;
          font-size: 14px;
          pointer-events: none;
          opacity: 0;
          transition: opacity 0.3s ease;
          z-index: 1000;
          white-space: nowrap;
          box-shadow: 0 2px 10px rgba(0,0,0,0.2);
          transform: translateX(-50%);
      }

      .floating-tooltip.active {
          opacity: 1;
      }

      .floating-tooltip::after {
          content: '';
          position: absolute;
          top: 100%;
          left: 50%;
          margin-left: -5px;
          border-width: 5px;
          border-style: solid;
          border-color: #333 transparent transparent transparent;
      }
      .floating-btn.show-tooltip::before,
      .floating-btn.show-tooltip::after {
          opacity: 1;
          visibility: visible;
          transform: translateY(-50%) translateX(-5px);
      }
      .tp-programs-section {
           font-family: Arial, sans-serif;
           background-color: #f8f9fa;
           padding: 20px;
       }

       /* Auto-scroll Animation */
       .tp-programs-container {
           max-width: 1200px;
           margin: 0 auto;
           overflow-x: auto;
           scroll-behavior: smooth;
       }

       .tp-programs-scroll-wrapper {
           display: flex;
           animation: tp-programs-autoScroll 20s linear infinite;
           width: max-content;
       }

       .tp-programs-scroll-wrapper:hover {
           animation-play-state: paused;
       }

       @keyframes tp-programs-autoScroll {
           0% {
               transform: translateX(0);
           }
           100% {
               transform: translateX(-50%);
           }
       }

       .tp-programs-card-wrapper {
           flex: 0 0 280px;
           margin-right: 20px;
       }

       .tp-programs-row {
           display: flex;
           flex-wrap: wrap;
           margin: -15px;
       }

       .tp-programs-col {
           flex: 0 0 25%;
           max-width: 25%;
           padding: 15px;
       }

       .tp-programs-section .tp-program-item {
           background-color: #e9ecef;
           border-radius: 8px;
           overflow: hidden;
           transition: transform 0.3s ease, box-shadow 0.3s ease;
           height: 100%;
           display: flex;
           flex-direction: column;
       }

       .tp-programs-section .tp-program-item:hover {
           transform: translateY(-5px);
           box-shadow: 0 10px 25px rgba(0,0,0,0.1);
       }

       .tp-programs-section .tp-program-thumb {
           position: relative;
           overflow: hidden;
           height: 120px;
       }

       .tp-programs-section .tp-program-thumb img {
           width: 100%;
           height: 100%;
           object-fit: cover;
           transition: transform 0.3s ease;
       }

       .tp-programs-section .tp-program-thumb:hover img {
           transform: scale(1.05);
       }

       .tp-programs-section .tp-program-content {
           padding: 15px;
           flex-grow: 1;
       }

       .tp-programs-section .tp-program-title {
           margin-bottom: 10px;
       }

       .tp-programs-section .tp-program-title a {
           color: #333;
           text-decoration: none;
           font-size: 16px;
           font-weight: 600;
           line-height: 1.3;
       }

       .tp-programs-section .tp-program-title a:hover {
           color: #AB0C2F;
       }

       .tp-programs-section .tp-program-tag {
           margin-bottom: 15px;
       }

       .tp-programs-section .tp-program-tag p {
           display: flex;
           align-items: center;
           color: #666;
           font-size: 14px;
       }

       .tp-programs-section .tp-program-tag span {
           margin-right: 8px;
           width: 16px;
           height: 16px;
           background-color: #AB0C2F;
           border-radius: 50%;
           display: inline-block;
       }

       .tp-programs-section .tp-program-btn {
           padding: 0 15px 15px;
       }

       .tp-programs-section .tp-program-btn a {
           display: inline-block;
           background-color: #003090;
           color: white;
           text-decoration: none;
           padding: 10px 20px;
           border-radius: 5px;
           font-weight: 600;
           transition: background-color 0.3s ease;
           width: 100%;
           text-align: center;
           font-size: 14px;
       }

       .tp-programs-section .tp-program-btn a:hover {
           background-color: #00869e;
       }

       .tp-programs-section .tp-program-all {
           text-align: center;
           margin-top: 20px;
           padding: 15px;
       }

       .tp-programs-section .tp-program-all p {
           font-size: 16px;
           color: #666;
       }

       .tp-programs-section .tp-program-all a {
           color: #AB0C2F;
           text-decoration: none;
           font-weight: 600;
           display: inline-flex;
           align-items: center;
           gap: 5px;
       }

       .tp-programs-section .tp-program-all a:hover {
           text-decoration: underline;
       }

       /* Responsive Design for Programs Section */
       @media (max-width: 992px) {
           .tp-programs-col {
               flex: 0 0 50%;
               max-width: 50%;
           }
       }

       @media (max-width: 576px) {
           .tp-programs-col {
               flex: 0 0 100%;
               max-width: 100%;
           }
       }

       /* Animation for Programs Section */
       .tp-programs-fadeInUp {
           animation: tp-programs-fadeInUp 0.6s ease-out;
       }

       @keyframes tp-programs-fadeInUp {
           from {
               opacity: 0;
               transform: translateY(30px);
           }
           to {
               opacity: 1;
               transform: translateY(0);
           }
       }
       #certificateResult {
           margin-top: 20px;
           transition: all 0.3s ease;
       }

       .certificate-details {
           background: #f8f9fa;
           border-radius: 5px;
           padding: 20px;
           margin-top: 20px;
           border-left: 4px solid #28a745;
       }