/* -----------------------------------------------------------------------------------

    Template Name: RumanSMS Theme
    Template URI: http://rumansms.com
    Description: This is the new design for RumanSMS
    Author: Muhammad Abba Gana, Be With Me Technologies
    Author URI: https://bewithmetech.com.ng/

----------------------------------------------------------------------------------- */
 /* .sidebar-wrapper::-webkit-scrollbar {
     width: 100px !important;
 } */
 /* **************** For form error response */
 
 label.error {
     color: #dc3545;
     font-size: .875em;
     display: block;
     margin-top: 5px;
 }
 
 input.error {
     margin: 0px !important;
     border: 0.5px solid #dc3545;
     color: #dc3545;
 }
 
 select.error {
     margin: 0px !important;
     border: 1px dashed #dc3545;
     color: #dc3545;
 }
 /* **************** End of form error response */
 /* Page loader */
 
 .loader-ball {
     background: #ff0000;
 }
 /* form Loader */
 
 .loader-box .loader-17 {
     background-color: #5f4b8b;
     border-color: #5f4b8b;
 }
 
 .loader-box .loader-17:before,
 .loader-box .loader-17:after {
     background-color: #ff0000;
 }
 /* Result field */
 
 .result-master::-webkit-inner-spin-button,
 .result-master::-webkit-outer-spin-button {
     -webkit-appearance: none;
     margin: 0;
 }
 
 .next-fees-button::-webkit-inner-spin-button,
 .next-fees-button::-webkit-outer-spin-button {
     -webkit-appearance: none;
     margin: 0;
 }
 
 .result-master {
     font: inherit;
     padding: 0.32em 0.5em;
     border: 0.125em solid hsl(30, 76%, 10%);
     outline: none;
     width: 5.5em;
 }
 /* Show red borders when filled, but invalid */
 /* .result-master:not(:placeholder-shown) {
     border-color: hsl(0, 76%, 50%);
     ;
 } */
 /* Show green borders when valid */
 /* .result-master:valid {
     border-color: hsl(120, 76%, 50%);
 } */
 
 .result-master.is-invalid {
     border-color: #dc3545;
 }
 
 .total.text-danger {
     font-weight: bold;
 }
 /* Template  */
 
 .gallery-header {
     text-align: center;
     margin-bottom: 10px;
 }
 
 .gallery-header h6 {
     margin: 0;
 }
 
 .radio-options {
     text-align: center;
     margin-top: 10px;
 }
 
 .radio-options label {
     margin-bottom: 0;
 }
 /* Panel Navigation buttons */
 
 .nav-buttons-container {
     background-color: #f8f9fa;
     padding: 12px 15px;
     border-radius: 5px;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
     position: relative;
     overflow: hidden;
     animation: gradientBorder 6s ease infinite;
     margin: 15px 0;
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
 }
 
 @keyframes gradientBorder {
     0% {
         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 2px rgba(95, 75, 139, 0);
     }
     50% {
         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 2px rgba(95, 75, 139, 0.3);
     }
     100% {
         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 2px rgba(95, 75, 139, 0);
     }
 }
 
 .nav-buttons-container::before {
     content: '';
     position: absolute;
     top: 0;
     left: -50%;
     width: 15%;
     height: 2px;
     background: linear-gradient(90deg, transparent, #5f4b8b, transparent);
     animation: shine 3s infinite;
 }
 
 @keyframes shine {
     0% {
         left: -50%;
         opacity: 0.7;
     }
     100% {
         left: 150%;
         opacity: 0.7;
     }
 }
 
 .nav-button {
     display: flex;
     align-items: center;
     padding: 8px 16px;
     border-radius: 4px;
     text-decoration: none;
     font-weight: 500;
     font-size: 14px;
     transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     position: relative;
     overflow: hidden;
     z-index: 1;
 }
 
 .nav-button:hover {
     transform: translateY(-3px);
 }
 
 .nav-button:active {
     transform: translateY(1px);
 }
 
 .nav-button i {
     margin-right: 8px;
     transition: all 0.4s;
 }
 
 .nav-button:hover i {
     transform: scale(1.2) rotate(10deg);
     animation: iconPop 0.4s ease;
 }
 
 @keyframes iconPop {
     0% {
         transform: scale(1);
     }
     50% {
         transform: scale(1.3) rotate(15deg);
     }
     100% {
         transform: scale(1.2) rotate(10deg);
     }
 }
 /* Button float animation for all buttons */
 
 @keyframes float {
     0% {
         transform: translateY(0px);
     }
     50% {
         transform: translateY(-5px);
     }
     100% {
         transform: translateY(0px);
     }
 }
 
 .nav-button:hover {
     animation: float 2s ease infinite;
 }
 
 .primary-btn {
     background-color: #5f4b8b;
     color: white;
     box-shadow: 0 4px 10px rgba(95, 75, 139, 0.2);
     position: relative;
     z-index: 1;
     overflow: hidden;
 }
 
 .primary-btn::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(45deg, #4f3e74, #7a66a8);
     z-index: -1;
     opacity: 0;
     transition: opacity 0.3s ease;
 }
 
 .primary-btn::after {
     content: '';
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0;
     left: -100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
     transition: all 0.6s;
     z-index: 0;
 }
 
 .primary-btn span {
     position: relative;
     z-index: 2;
 }
 
 .primary-btn:hover {
     color: #ffffff;
     text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
     box-shadow: 0 6px 15px rgba(95, 75, 139, 0.5);
 }
 
 .primary-btn:hover::before {
     opacity: 1;
 }
 
 .primary-btn:hover::after {
     left: 100%;
 }
 
 .secondary-btn {
     background-color: white;
     color: #444;
     border: 1px solid #ddd;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
     position: relative;
     overflow: hidden;
 }
 
 .secondary-btn::before {
     content: '';
     position: absolute;
     width: 100%;
     height: 0;
     bottom: 0;
     left: 0;
     background: linear-gradient(to top, rgba(95, 75, 139, 0.15), rgba(95, 75, 139, 0.05));
     transition: all 0.4s;
     z-index: -1;
 }
 
 .secondary-btn::after {
     content: '';
     position: absolute;
     width: 20px;
     height: 20px;
     background: radial-gradient(circle, rgba(95, 75, 139, 0.3) 0%, rgba(95, 75, 139, 0) 70%);
     border-radius: 50%;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%) scale(0);
     transition: transform 0.5s, opacity 0.3s;
     opacity: 0;
     z-index: -1;
 }
 
 .secondary-btn:hover {
     color: #5f4b8b;
     border-color: #bbb;
     box-shadow: 0 4px 8px rgba(95, 75, 139, 0.15);
 }
 
 .secondary-btn:hover::before {
     height: 100%;
 }
 
 .secondary-btn:hover::after {
     animation: ripple 1s ease-out;
 }
 
 @keyframes ripple {
     0% {
         transform: translate(-50%, -50%) scale(0);
         opacity: 1;
     }
     100% {
         transform: translate(-50%, -50%) scale(15);
         opacity: 0;
     }
 }
 /* Button pulse animation for primary button */
 
 @keyframes pulse {
     0% {
         box-shadow: 0 0 0 0 rgba(95, 75, 139, 0.7);
     }
     70% {
         box-shadow: 0 0 0 10px rgba(95, 75, 139, 0);
     }
     100% {
         box-shadow: 0 0 0 0 rgba(95, 75, 139, 0);
     }
 }
 
 .primary-btn {
     animation: pulse 2s infinite;
 }
 /* Additional button animations */
 
 .nav-buttons-container:hover .primary-btn:not(:hover) {
     animation: subtlePulse 2s infinite;
 }
 
 @keyframes subtlePulse {
     0% {
         transform: scale(1);
     }
     50% {
         transform: scale(1.03);
     }
     100% {
         transform: scale(1);
     }
 }
 /* Add glowing effect on button container */
 
 .nav-buttons-container::after {
     content: '';
     position: absolute;
     bottom: 0;
     right: 0;
     width: 100px;
     height: 100px;
     background: radial-gradient(circle, rgba(95, 75, 139, 0.2) 0%, rgba(95, 75, 139, 0) 70%);
     border-radius: 50%;
     opacity: 0;
     animation: glow 5s infinite;
 }
 
 @keyframes glow {
     0% {
         opacity: 0;
         right: -50px;
         bottom: -50px;
     }
     50% {
         opacity: 1;
     }
     100% {
         opacity: 0;
         right: 100%;
         bottom: 100%;
     }
 }
 /* Add highlighting effect to button text on hover */
 
 .nav-button span {
     position: relative;
     z-index: 2;
     transition: all 0.3s;
 }
 
 .nav-button:hover span {
     letter-spacing: 0.5px;
 }
 /* Result heading panel */
 
 .student-header {
     background: linear-gradient(135deg, #5f4b8b 0%, #4a3a6b 100%);
     border-radius: 16px;
     padding: 24px 32px;
     margin-bottom: 24px;
     box-shadow: 0 10px 30px rgba(95, 75, 139, 0.3);
     color: white;
     position: relative;
     overflow: hidden;
     animation: headerEntrance 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     background-size: 200% 200%;
     animation: headerEntrance 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), gradientShift 8s ease infinite;
     transition: all 0.3s ease;
 }
 
 .student-header:hover {
     transform: translateY(-2px);
     box-shadow: 0 15px 40px rgba(95, 75, 139, 0.4);
 }
 
 .student-header::before {
     content: '';
     position: absolute;
     top: -50%;
     right: -20%;
     width: 200px;
     height: 200px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.1);
     z-index: 0;
     animation: floatBubble1 6s ease-in-out infinite;
 }
 
 .student-header::after {
     content: '';
     position: absolute;
     bottom: -30%;
     left: -10%;
     width: 150px;
     height: 150px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.05);
     z-index: 0;
     animation: floatBubble2 8s ease-in-out infinite reverse;
 }
 
 .header-content {
     position: relative;
     z-index: 1;
 }
 
 .academic-info {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: 24px;
     margin-bottom: 16px;
 }
 
 .info-group {
     display: flex;
     align-items: center;
     gap: 8px;
     background: rgba(255, 255, 255, 0.15);
     padding: 8px 16px;
     border-radius: 25px;
     backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, 0.2);
     transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     animation: slideInStagger 0.8s ease-out backwards;
     transform-origin: center;
 }
 
 .info-group:nth-child(1) {
     animation-delay: 0.1s;
 }
 
 .info-group:nth-child(2) {
     animation-delay: 0.2s;
 }
 
 .info-group:nth-child(3) {
     animation-delay: 0.3s;
 }
 
 .info-group:nth-child(4) {
     animation-delay: 0.4s;
 }
 
 .info-group:nth-child(5) {
     animation-delay: 0.5s;
 }
 
 .info-group:hover {
     background: rgba(255, 255, 255, 0.25);
     transform: translateY(-3px) scale(1.05);
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
 }
 
 .info-label {
     font-size: 12px;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     opacity: 0.9;
 }
 
 .info-value {
     font-size: 14px;
     font-weight: 700;
     margin-left: 4px;
     position: relative;
 }
 
 .info-value::after {
     content: '';
     position: absolute;
     bottom: -2px;
     left: 0;
     width: 0;
     height: 2px;
     background: rgba(255, 255, 255, 0.6);
     transition: width 0.3s ease;
 }
 
 .info-group:hover .info-value::after {
     width: 100%;
 }
 
 .student-info {
     background: rgba(255, 255, 255, 0.2);
     padding: 16px 20px;
     border-radius: 12px;
     backdrop-filter: blur(15px);
     border: 1px solid rgba(255, 255, 255, 0.25);
     animation: studentInfoSlide 1s ease-out 0.6s backwards;
     position: relative;
     overflow: hidden;
 }
 
 .student-info::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
     animation: shimmer 3s ease-in-out infinite;
 }
 
 .student-name {
     font-size: 20px;
     font-weight: 700;
     margin-bottom: 4px;
     text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     animation: textGlow 3s ease-in-out infinite alternate;
 }
 
 .student-id {
     font-size: 14px;
     opacity: 0.9;
     font-weight: 500;
     font-family: 'Courier New', monospace;
     background: rgba(255, 255, 255, 0.2);
     padding: 4px 8px;
     border-radius: 6px;
     display: inline-block;
     animation: typewriter 2s steps(20) 1s both;
     overflow: hidden;
     white-space: nowrap;
     border-right: 2px solid rgba(255, 255, 255, 0.7);
 }
 /* Icons with animations */
 
 .section-icon::before {
     content: "🏫";
     animation: iconBounce 2s ease-in-out infinite;
 }
 
 .class-icon::before {
     content: "📚";
     animation: iconBounce 2s ease-in-out infinite 0.2s;
 }
 
 .batch-icon::before {
     content: "👥";
     animation: iconBounce 2s ease-in-out infinite 0.4s;
 }
 
 .session-icon::before {
     content: "📅";
     animation: iconBounce 2s ease-in-out infinite 0.6s;
 }
 
 .term-icon::before {
     content: "📖";
     animation: iconBounce 2s ease-in-out infinite 0.8s;
 }
 /* Beautiful Animations */
 
 @keyframes headerEntrance {
     0% {
         opacity: 0;
         transform: translateY(-50px) scale(0.9);
     }
     100% {
         opacity: 1;
         transform: translateY(0) scale(1);
     }
 }
 
 @keyframes gradientShift {
     0%,
     100% {
         background-position: 0% 50%;
     }
     50% {
         background-position: 100% 50%;
     }
 }
 
 @keyframes slideInStagger {
     0% {
         opacity: 0;
         transform: translateX(-30px) rotateY(-20deg);
     }
     100% {
         opacity: 1;
         transform: translateX(0) rotateY(0deg);
     }
 }
 
 @keyframes studentInfoSlide {
     0% {
         opacity: 0;
         transform: translateY(30px);
     }
     100% {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
 @keyframes floatBubble1 {
     0%,
     100% {
         transform: translateY(0px) rotate(0deg);
     }
     50% {
         transform: translateY(-20px) rotate(180deg);
     }
 }
 
 @keyframes floatBubble2 {
     0%,
     100% {
         transform: translateX(0px) rotate(0deg);
     }
     50% {
         transform: translateX(20px) rotate(-180deg);
     }
 }
 
 @keyframes iconBounce {
     0%,
     100% {
         transform: translateY(0);
     }
     50% {
         transform: translateY(-3px);
     }
 }
 
 @keyframes textGlow {
     0% {
         text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     }
     100% {
         text-shadow: 0 2px 20px rgba(255, 255, 255, 0.3);
     }
 }
 
 @keyframes shimmer {
     0% {
         left: -100%;
     }
     100% {
         left: 100%;
     }
 }
 
 @keyframes typewriter {
     0% {
         width: 0;
         border-right-color: rgba(255, 255, 255, 0.7);
     }
     50% {
         border-right-color: rgba(255, 255, 255, 0.7);
     }
     100% {
         width: 100%;
         border-right-color: transparent;
     }
 }
 /* Responsive design */
 
 @media (max-width: 768px) {
     .academic-info {
         gap: 12px;
     }
     .info-group {
         padding: 6px 12px;
     }
     .student-header {
         padding: 20px;
     }
 }
 
 @media (max-width: 480px) {
     .academic-info {
         justify-content: center;
     }
     .info-group {
         flex: 1;
         min-width: calc(50% - 6px);
         justify-content: center;
     }
 }
 /* Student Download Result BTN */
 
 .download-container {
     text-align: center;
 }
 
 .download-btn {
     position: relative;
     display: inline-flex;
     align-items: center;
     gap: 12px;
     padding: 16px 32px;
     background: linear-gradient(135deg, #5f4b8b, #704593, #8653a1);
     color: white !important;
     text-decoration: none;
     border: none;
     border-radius: 16px;
     font-size: 16px;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     box-shadow: 0 10px 25px rgba(95, 75, 139, 0.3), 0 4px 10px rgba(0, 0, 0, 0.1);
     overflow: hidden;
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }
 
 .download-btn::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
     transition: left 0.6s;
 }
 
 .download-btn:hover::before {
     left: 100%;
 }
 
 .download-btn:hover {
     transform: translateY(-3px) scale(1.02);
     box-shadow: 0 20px 40px rgba(95, 75, 139, 0.4), 0 8px 20px rgba(0, 0, 0, 0.15);
     color: white !important;
 }
 
 .download-btn:active {
     transform: translateY(-1px) scale(1.01);
     transition: all 0.1s;
 }
 
 .download-icon {
     width: 24px;
     height: 24px;
     animation: bouncenew 2s infinite;
 }
 
 @keyframes bouncenew {
     0%,
     20%,
     50%,
     80%,
     100% {
         transform: translateY(0);
     }
     40% {
         transform: translateY(-4px);
     }
     60% {
         transform: translateY(-2px);
     }
 }
 
 .pulses-ring {
     position: absolute;
     top: 50%;
     left: 50%;
     width: 100%;
     height: 100%;
     border: 3px solid rgba(139, 92, 246, 0.6);
     border-radius: 16px;
     transform: translate(-50%, -50%);
     animation: newpulse 2s infinite;
     pointer-events: none;
 }
 
 @keyframes newpulse {
     0% {
         transform: translate(-50%, -50%) scale(1);
         opacity: 1;
     }
     100% {
         transform: translate(-50%, -50%) scale(1.2);
         opacity: 0;
     }
 }
 
 .download-text {
     position: relative;
     z-index: 2;
     color: white !important;
 }
 /* Sparkle effect */
 
 .resultsparkle {
     position: absolute;
     width: 4px;
     height: 4px;
     background: white;
     border-radius: 50%;
     animation: resultsparkle 1.5s infinite;
 }
 
 .resultsparkle:nth-child(1) {
     top: 20%;
     left: 20%;
     animation-delay: 0s;
 }
 
 .resultsparkle:nth-child(2) {
     top: 30%;
     right: 25%;
     animation-delay: 0.3s;
 }
 
 .resultsparkle:nth-child(3) {
     bottom: 25%;
     left: 30%;
     animation-delay: 0.6s;
 }
 
 .resultsparkle:nth-child(4) {
     bottom: 20%;
     right: 20%;
     animation-delay: 0.9s;
 }
 
 @keyframes resultsparkle {
     0%,
     100% {
         opacity: 0;
         transform: scale(0);
     }
     50% {
         opacity: 1;
         transform: scale(1);
     }
 }
 /* Loading state */
 
 .download-btn.loading {
     pointer-events: none;
 }
 
 .download-btn.loading .download-icon {
     animation: newspin 1s linear infinite;
 }
 
 @keyframes newspin {
     from {
         transform: rotate(0deg);
     }
     to {
         transform: rotate(360deg);
     }
 }
 /* Success state */
 
 .download-btn.success {
     background: linear-gradient(135deg, #10b981, #059669);
 }
 
 .download-btn.success .download-icon {
     animation: none;
 }
 /* Demo section styling */
 
 .demo-section {
     background: rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(10px);
     border-radius: 20px;
     padding: 40px;
     border: 1px solid rgba(255, 255, 255, 0.2);
 }
 /* Sessional Result heading */
 
 .summary-header {
     background: linear-gradient(135deg, #5f4b8b, #7a65a3);
     color: white;
     padding: 20px;
     border-radius: 12px;
     box-shadow: 0 4px 15px rgba(95, 75, 139, 0.3);
     margin-bottom: 20px;
     position: relative;
     overflow: hidden;
 }
 
 .summary-header::before {
     content: '';
     position: absolute;
     top: -50%;
     right: -50%;
     width: 100%;
     height: 100%;
     background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
     border-radius: 50%;
 }
 
 .info-grids {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
     gap: 15px;
     position: relative;
     z-index: 1;
 }
 
 .info-items {
     background: rgba(255, 255, 255, 0.1);
     padding: 12px 16px;
     border-radius: 8px;
     border-left: 4px solid rgba(255, 255, 255, 0.3);
     backdrop-filter: blur(10px);
     transition: all 0.3s ease;
 }
 
 .info-items:hover {
     background: rgba(255, 255, 255, 0.15);
     transform: translateY(-2px);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
 .info-labels {
     font-weight: 600;
     font-size: 0.85rem;
     opacity: 0.9;
     margin-bottom: 4px;
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }
 
 .info-values {
     font-weight: 700;
     font-size: 1.1rem;
     color: #fff;
 }
 
 .session-highlight {
     grid-column: 1 / -1;
     text-align: center;
     background: rgba(255, 255, 255, 0.15);
     padding: 15px;
     border-radius: 10px;
     margin-top: 10px;
 }
 
 .session-highlight .info-values {
     font-size: 1.3rem;
     font-weight: 800;
 }