/*!
* <!-- 🔒 Protected by Chaudhary Abdul Ghaffar | © 2025 Arif Enterprises -->
* This CSS is protected under copyright law.
* Unauthorized copying, reuse, or modification is strictly prohibited.
* Contact: contact.arifenterprises@gmail.com
*/
.order-summary-details{margin:10px 0;max-height:200px;overflow-y:auto;background:linear-gradient(to right,#3f6b97 1%,#35cd95 100%);border:1px solid #0c0b0b;padding:10px}.modern-section-title h7{text-align:center;color:#333;margin-bottom:20px;font-weight:600}@media (max-width:480px){#order-summary-details{padding:10px!important}#order-summary-details [style*="grid-template-columns"]{grid-template-columns:1fr!important}#order-summary-details *{word-break:break-word}#order-summary-details h2{font-size:20px!important}#order-summary-details h3{font-size:16px!important}.header{text-align:center;margin-bottom:5mm!important;padding-bottom:2mm!important;border-bottom:.5pt solid #ccc!important;background:linear-gradient(135deg,#cbf2e9,#f1d9e4)}.header h1{font-size:14pt!important;margin:1mm 0!important;color:black!important}.header .subtitle{font-size:11pt!important;margin:2mm auto!important;color:#666!important}}.print-btn[onclick="window.print()"]{background:#3b82f6;color:#fff;border:none;padding:10px 20px;border-radius:6px;cursor:pointer}.print-btn[onclick="downloadReceiptJPG()"]{background:#10b981;color:#fff;border:none;padding:10px 20px;border-radius:6px;cursor:pointer}.print-btn:hover{opacity:.9}.delete-review-btn{background:rgb(239 68 68 / .1);backdrop-filter:blur(10px);color:#ef4444;border:1px solid rgb(239 68 68 / .2);padding:6px 12px;border-radius:8px;cursor:pointer;font-size:12px;font-weight:500;transition:all 0.3s ease;display:inline-flex;align-items:center;gap:6px}.delete-review-btn:hover{background:rgb(239 68 68 / .2);border-color:rgb(239 68 68 / .4);transform:translateY(-1px);box-shadow:0 4px 12px rgb(239 68 68 / .15)}.delete-review-btn svg{width:14px;height:14px}.reviews-container{padding:20px}.reviews-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:15px;border-bottom:2px solid #f0f0f0}.reviews-title{margin:0;color:#333;font-size:24px}.reviews-summary{text-align:right}.overall-rating{display:flex;align-items:center;gap:10px;margin-bottom:5px}.rating-number{font-size:32px;font-weight:700;color:#4f46e5}.rating-stars{font-size:20px;color:gold}.total-reviews{color:#666;font-size:14px}.rating-distribution{margin:20px 0;padding:15px;background:#f8f9fa;border-radius:8px}.distribution-row{display:flex;align-items:center;gap:10px;margin:8px 0}.dist-star{width:40px;color:#666;font-size:14px}.dist-bar{flex:1;height:8px;background:#e0e0e0;border-radius:4px;overflow:hidden}.dist-fill{height:100%;background:linear-gradient(90deg,#4f46e5,#8b5cf6);transition:width 0.3s ease}.dist-count{width:30px;text-align:right;color:#666;font-size:14px}.sort-options{display:flex;align-items:center;gap:10px;margin:15px 0;padding:10px;background:#f8f9fa;border-radius:6px}.sort-options label{color:#666;font-size:14px}.sort-select{padding:6px 12px;border:1px solid #ddd;border-radius:4px;background:#fff;color:#333;font-size:14px}.review-item{padding:15px;margin-bottom:15px;background:#fff;border-radius:8px;border:1px solid #e0e0e0;transition:transform 0.2s,box-shadow 0.2s}.review-item:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgb(0 0 0 / .1)}.review-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px}.reviewer-info{display:flex;align-items:center;gap:12px}.reviewer-avatar{width:40px;height:40px;background:linear-gradient(135deg,#4f46e5,#8b5cf6);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px}.reviewer-details{flex:1}.reviewer-name{color:#333;font-size:16px;margin:0 0 4px 0}.review-date{color:#888;font-size:12px}.review-rating{color:gold;font-size:18px;white-space:nowrap}.review-comment{color:#444;line-height:1.6;margin:10px 0;font-size:14px}.review-email{color:#666;font-size:12px;font-style:italic;margin-top:8px}.form-title{margin:20px 0 15px 0;color:#333;font-size:20px}.review-form{margin-top:25px;padding:20px;background:#c6b5c0;border-radius:8px}.form-group{margin-bottom:20px}.form-group label{display:block;margin-bottom:8px;color:#444;font-weight:500;font-size:14px}.review-form input,.review-form select,.review-form textarea{width:100%;padding:12px;border:2px solid #e0e0e0;border-radius:6px;font-size:14px;transition:border-color 0.3s}.review-form input:focus,.review-form select:focus,.review-form textarea:focus{outline:none;border-color:#4f46e5}.star-rating-input{display:flex;flex-direction:row-reverse;justify-content:flex-start;gap:5px;margin-bottom:10px}.star-rating-input input{display:none}.star-rating-input label{font-size:32px;color:#E5E7EB;cursor:pointer;transition:color 0.2s;margin:0;padding:0}.star-rating-input input:checked~label,.star-rating-input label:hover,.star-rating-input label:hover~label{color:gold}.char-counter{text-align:right;color:#888;font-size:12px;margin-top:5px}.submit-btn{background:linear-gradient(135deg,#4f46e5,#8b5cf6);color:#fff;border:none;padding:14px 28px;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;transition:transform 0.2s,box-shadow 0.2s}.submit-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgb(79 70 229 / .3)}.submit-icon{font-size:18px}.notification{position:fixed;bottom:20px;right:20px;background:#fff;padding:15px 20px;border-radius:8px;box-shadow:0 4px 20px rgb(0 0 0 / .15);z-index:10000;transform:translateY(100%);opacity:0;transition:transform 0.3s,opacity 0.3s;max-width:350px;border-left:4px solid #10b981}.notification[data-type="warning"]{border-left-color:#f59e0b}.notification[data-type="error"]{border-left-color:#ef4444}.notification.show{transform:translateY(0);opacity:1}.notification-content{display:flex;align-items:center;gap:12px}.notification-icon{font-size:20px}.notification-text{flex:1;color:#333;font-size:14px}@media (max-width:768px){.reviews-header{flex-direction:column;align-items:flex-start;gap:15px}.reviews-summary{text-align:left}.rating-number{font-size:28px}.review-header{flex-direction:column;gap:10px}.review-rating{align-self:flex-start}}@media print{*{margin:0!important;padding:0!important;box-shadow:none!important;text-shadow:none!important}@page{size:A4;margin:5mm 10mm!important}body{width:100%!important;margin:0!important;padding:0!important;font-size:12pt!important;line-height:1.2!important;-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;background:white!important;color:black!important}.print-button,button,.no-print{display:none!important}.receipt-container{width:100%!important;max-width:100%!important;height:auto!important;min-height:auto!important;margin:0 auto!important;padding:3mm!important;border:1px solid #ccc!important;border-radius:3px!important;background:white!important;position:relative!important;overflow:visible!important;page-break-inside:avoid!important;page-break-after:avoid!important;page-break-before:avoid!important;break-inside:avoid!important}.receipt-container::before,.receipt-container::after{display:none!important}.header{text-align:center;margin-bottom:5mm!important;padding-bottom:2mm!important;border-bottom:.5pt solid #ccc!important;background:linear-gradient(135deg,#cbf2e9,#f1d9e4)}.header h1{font-size:14pt!important;margin:1mm 0!important;color:black!important}.header .subtitle{font-size:11pt!important;margin:2mm auto!important;color:#666!important}.order-id{font-size:12pt!important;padding:1mm 3mm!important;margin:2mm auto!important;border:.5pt solid #333!important;background:white!important;color:black!important;box-shadow:none!important}.info-section{display:block!important;margin-bottom:4mm!important}.info-card{width:100%!important;margin-bottom:2mm!important;padding:2mm!important;border:.5pt solid #ddd!important;background:#f9f9f9!important;page-break-inside:avoid!important}.info-card h3{font-size:12pt!important;margin-bottom:1mm!important}.info-card p{font-size:11pt!important;margin-bottom:0.5mm!important;line-height:1.1!important}.items-table{width:100%!important;margin:0 auto 4mm auto!important;border-collapse:collapse!important;font-size:8pt!important;page-break-inside:avoid!important}.items-table thead{background:#f0f0f0!important;color:black!important}.items-table th{padding:1mm!important;font-weight:700;border:.5pt solid #ccc!important;font-size:9pt!important}.items-table td{padding:.5mm 1mm!important;border:.5pt solid #eee!important;line-height:1!important;vertical-align:top!important}.items-table td,.items-table th{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.total-section{margin:3mm auto!important;padding:3mm!important;background:#f0f0f0!important;color:black!important;border:.5pt solid #ccc!important}.total-row{margin-bottom:1mm!important}.total-label{font-size:12pt!important}.total-amount{font-size:14pt!important}.note-section{padding:2mm!important;margin:2mm 0!important;border:.5pt solid #ddd!important;font-size:11pt!important}.footer{margin-top:3mm!important;padding-top:2mm!important;border-top:.5pt solid #ccc!important;font-size:11pt!important}.contact-info{padding:1mm!important;margin:1mm 0!important;font-size:11pt!important;line-height:1!important}@page :last{margin-bottom:0!important}html,body{height:99%!important;max-height:99%!important;overflow:hidden!important}}*{margin:0;padding:0;box-sizing:border-box}.receipt-container{max-width:800px;margin:0 auto;border:2px solid #e0e0e0;border-radius:16px;padding:25px;background:#fff;box-shadow:0 8px 32px rgb(0 0 0 / .08);position:relative}.receipt-container::before{content:'';position:absolute;top:0;left:0;right:0;height:0;background:linear-gradient(90deg,#ffffff 0%,#fdfcfe 100%)}.header{text-align:center;margin-bottom:25px;padding-bottom:15px;border-bottom:2px solid #f0f0f0}.header h1{color:#2c3e50;font-size:32px;font-weight:700;margin-bottom:8px}.header .subtitle{color:#7f8c8d;font-size:18px;margin-bottom:15px}.order-id{display:inline-block;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;padding:8px 20px;border-radius:50px;font-size:20px;font-weight:600;margin:10px 0;box-shadow:0 4px 12px rgb(102 126 234 / .2)}.info-section{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-bottom:25px}.info-card{background:#f8fafc;padding:20px;border-radius:12px;border-left:4px solid #667eea;box-shadow:0 2px 8px rgb(0 0 0 / .04)}.info-card h3{color:#2c3e50;font-size:22px;font-weight:600;margin-bottom:15px;display:flex;align-items:center;gap:8px}.info-card p{margin-bottom:8px;color:#4a5568}.items-table{width:100%;border-collapse:collapse;margin-bottom:25px;border-radius:12px;overflow:hidden;box-shadow:0 4px 12px rgb(0 0 0 / .05);font-family:Arial,sans-serif}.items-table thead{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff}.items-table th{padding:14px 12px!important;text-align:left!important;font-weight:700!important;font-size:14px!important;color:white!important;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)}.items-table td{padding:12px 10px!important;border-bottom:1px solid #eaeaea!important;font-size:14px!important;color:#000}.text-center{text-align:center;color:#000}.text-right{text-align:center;color:#000}.total-section{background:linear-gradient(135deg,#2c3e50 0%,#34495e 100%);color:#fff;padding:20px;border-radius:12px;margin-bottom:25px}.total-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.total-label{font-size:20px;font-weight:500}.total-amount{font-size:20px;font-weight:700}.note-section{background:#fff8e1;border-left:4px solid #ffb300;padding:15px;border-radius:8px;margin-bottom:20px}.note-section strong{color:#e65100;display:block;margin-bottom:10px}.footer{text-align:center;padding-top:20px;border-top:1px solid #eaeaea;color:#718096}.footer p{margin-bottom:8px}.contact-info{background:#fafffdff!important;padding:16px!important;border-radius:8px!important;margin-top:8px!important;font-size:14px!important;line-height:0.7!important}.contact-info p{margin:0 0 10px!important}.print-button{display:inline-block;background:linear-gradient(135deg,#10b981 0%,#059669 100%);color:#fff;padding:12px 28px;border-radius:8px;border:none;cursor:pointer;font-size:15px;font-weight:600;margin-top:15px;transition:transform 0.2s}.print-button:hover{transform:translateY(-2px)}.compact-mode .items-table{font-size:16px}.compact-mode .items-table td{padding:6px 4px}.compact-mode .info-card{padding:12px}.no-dark-text{color:#2c3e50!important}.dark-mode .feature-box{background:linear-gradient(to right,#3f6b97 1%,#35cd95 100%);border-radius:14px;padding:18px 22px;margin-top:10px;line-height:1.6;font-size:15px;color:#fff;border-left:5px solid #4b8bff;box-shadow:0 4px 15px rgb(0 0 0 / .08);transition:0.3s ease}.light-mode .feature-box{background:linear-gradient(to bottom,#eec5c5 2%,#b0efd8 100%);border-radius:14px;padding:18px 22px;margin-top:10px;line-height:1.6;font-size:15px;color:#333;border-left:5px solid #4b8bff;box-shadow:0 4px 15px rgb(0 0 0 / .08);transition:0.3s ease}.feature-box:hover{transform:translateY(-4px) scale(1.01);box-shadow:0 10px 25px rgb(0 0 0 / .18)}.light-mode .feature-box p{white-space:pre-line;margin:0;font-weight:300;letter-spacing:.3px;line-height:1;color:#121212}.dark-mode .feature-box p{white-space:pre-line;margin:0;font-weight:300;letter-spacing:.3px;line-height:1;color:#f7f3f3}.feature-box .feature-heading{font-size:18px;color:#4bb8ff;text-align:center;font-weight:800!important;line-height:1.2;margin-bottom:10px!important}.feature-box p span{font-size:18px;margin-right:4px}.dark-mode .additional-info-box{background:linear-gradient(to right,#3f6b97 1%,#35cd95 100%);border-radius:14px;padding:18px 22px;margin-top:10px;line-height:1.6;font-size:15px;color:#fff;border-left:5px solid #4b8bff;box-shadow:0 4px 15px rgb(0 0 0 / .08);transition:0.3s ease}.light-mode .additional-info-box{background:linear-gradient(to bottom,#eec5c5 2%,#b0efd8 100%);border-radius:14px;padding:18px 22px;margin-top:10px;line-height:1.6;font-size:15px;color:#333;border-left:5px solid #4b8bff;box-shadow:0 4px 15px rgb(0 0 0 / .08);transition:0.3s ease}.additional-info-box:hover{transform:translateY(-4px) scale(1.01);box-shadow:0 10px 25px rgb(0 0 0 / .18)}.light-mode .additional-info-box p{white-space:pre-line;margin:0;font-weight:300;letter-spacing:.3px;line-height:1;color:#121212}.dark-mode .additional-info-box p{white-space:pre-line;margin:0;font-weight:300;letter-spacing:.3px;line-height:1;color:#f7f3f3}.additional-info-box .feature-heading{font-size:18px;color:#4bb8ff;text-align:center;font-weight:800!important;line-height:1.2;margin-bottom:10px!important}.additional-info-box p span{font-size:18px;margin-right:4px}.receipt{color:#000;margin-bottom:20px;font-weight:600;font-size:large}:root{--success-gradient:linear-gradient(135deg, rgba(16, 185, 129, 0.9) 0%, rgba(5, 150, 105, 0.9) 100%);--error-gradient:linear-gradient(135deg, rgba(239, 68, 68, 0.9) 0%, rgba(220, 38, 38, 0.9) 100%);--glass-bg:rgba(255, 255, 255, 0.1);--glass-border:rgba(255, 255, 255, 0.15);--text-light:#ffffff;--shadow-color:rgba(0, 0, 0, 0.2);--border-radius:18px;--blur-intensity:16px}h1{font-size:clamp(2.2rem, 5vw, 3.2rem);margin-bottom:12px;background:linear-gradient(90deg,#38bdf8,#a78bfa);-webkit-background-clip:text;background-clip:text;color:#fff0;font-weight:800}.subtitle{font-size:clamp(1rem, 3vw, 1.2rem);margin-bottom:40px;color:#94a3b8;max-width:600px;margin-left:auto;margin-right:auto;line-height:1.6}.demo-section{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-bottom:60px}.trigger-btn{padding:16px 28px;border:none;border-radius:14px;font-size:1rem;font-weight:600;cursor:pointer;transition:all 0.3s ease;display:flex;align-items:center;justify-content:center;gap:10px;min-width:180px;box-shadow:0 4px 20px rgb(0 0 0 / .15);position:relative;overflow:hidden}.trigger-btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgb(255 255 255 / .2),transparent);transition:left 0.5s ease}.trigger-btn:hover::before{left:100%}.btn-success{background:linear-gradient(135deg,#10b981,#059669);color:#fff}.btn-error{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff}.trigger-btn:hover{transform:translateY(-3px);box-shadow:0 8px 25px rgb(0 0 0 / .25)}.trigger-btn:active{transform:translateY(-1px)}.btn-icon{font-size:1.2rem}.notification-container{position:fixed;top:20px;right:20px;display:flex;flex-direction:column;align-items:flex-end;gap:15px;z-index:9999;pointer-events:none}.notify{position:relative;padding:20px 30px;border-radius:var(--border-radius);font-weight:600;color:var(--text-light);text-align:center;line-height:1.5;box-shadow:0 12px 40px var(--shadow-color);backdrop-filter:blur(var(--blur-intensity));border:1px solid var(--glass-border);pointer-events:auto;opacity:0;transform:translateX(100%);transition:all 0.4s ease;min-width:280px;max-width:380px;width:100%;display:flex;justify-content:space-between;align-items:center;overflow:hidden}.notify::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background-image:radial-gradient(circle at 20% 80%,transparent 0%,transparent 50%),radial-gradient(circle at 80% 20%,transparent 0%,transparent 50%);border-radius:var(--border-radius);z-index:-1}.notify.success{background:var(--success-gradient),var(--glass-bg);border-left:5px solid rgb(16 185 129 / .8)}.notify.error{background:var(--error-gradient),var(--glass-bg);border-left:5px solid rgb(239 68 68 / .8)}.notify.show{opacity:1;transform:translateX(0);animation:slideInRight 0.6s cubic-bezier(.34,1.56,.64,1) forwards}.notify.hide{opacity:0;transform:translateX(100%);animation:fadeOutUp 0.4s ease forwards}.notify-close{background:rgb(255 255 255 / .2);border:none;border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;font-size:1.2rem;transition:all 0.2s ease;opacity:.7;flex-shrink:0;margin-left:15px}.notify-close:hover{opacity:1;background:rgb(255 255 255 / .3);transform:rotate(90deg)}.notify-progress{position:absolute;bottom:0;left:0;height:4px;background:rgb(255 255 255 / .7);border-radius:0 0 var(--border-radius) var(--border-radius);width:100%;transform-origin:left}.notify-progress.animate{animation:progressShrink 4s linear forwards}@keyframes slideInRight{0%{opacity:0;transform:translateX(100px)}70%{opacity:1;transform:translateX(-10px)}100%{opacity:1;transform:translateX(0)}}@keyframes fadeOutUp{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-30px)}}@keyframes progressShrink{from{transform:scaleX(1)}to{transform:scaleX(0)}}@media (max-width:477px){.dark-mode .feature-box{background:linear-gradient(135deg,#2c3e50 0%,#1a2a3a 50%,#2575fc 100%);border-radius:18px;padding:32px 36px;margin-top:16px;line-height:1.7;font-size:15.5px;color:#fff;border:none;box-shadow:0 8px 32px rgb(0 0 0 / .25),inset 0 1px 0 rgb(255 255 255 / .1);transition:all 0.4s cubic-bezier(.175,.885,.32,1.1);position:relative;overflow:hidden;border-left:5px solid #4b8bff}.dark-mode .feature-box::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgb(255 255 255 / .1),transparent);z-index:1}.light-mode .feature-box{background:linear-gradient(135deg,#f8f9ff 0%,#e3f2fd 50%,#f0f7ff 100%);border-radius:18px;padding:28px 32px;margin-top:16px;line-height:1.7;font-size:15.5px;color:#2d3748;border:1px solid rgb(255 255 255 / .3);box-shadow:0 8px 32px rgb(0 107 255 / .08),0 4px 12px rgb(0 0 0 / .05);transition:all 0.4s cubic-bezier(.175,.885,.32,1.1);position:relative;overflow:hidden;border-left:5px solid #4b8bff}.light-mode .feature-box::after{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(to bottom right,rgb(255 255 255 / .3) 0%,rgb(255 255 255 / .1) 50%,transparent 100%);transform:rotate(30deg);pointer-events:none}.feature-box:hover{transform:translateY(-6px) scale(1.01);box-shadow:0 16px 48px rgb(0 0 0 / .2),0 8px 24px rgb(0 107 255 / .15);border-left:5px solid #6ba8ff}.dark-mode .feature-box:hover{background:linear-gradient(135deg,#364f6b 0%,#2a3b50 50%,#3d7afc 100%)}.light-mode .feature-box:hover{background:linear-gradient(135deg,#ffffff 0%,#edf6ff 50%,#f5fbff 100%)}.light-mode .feature-box p{white-space:pre-line;margin:0;font-weight:400;letter-spacing:.4px;line-height:1.6;color:#1a202c;text-shadow:0 1px 1px rgb(255 255 255 / .8)}.dark-mode .feature-box p{white-space:pre-line;margin:0;font-weight:400;letter-spacing:.4px;line-height:1.6;color:#e2e8f0;text-shadow:0 1px 2px rgb(0 0 0 / .2)}.feature-box .feature-heading{font-size:20px;background:linear-gradient(90deg,#4bb8ff,#6d8bff);-webkit-background-clip:text;background-clip:text;color:#fff0;text-align:center;font-weight:700!important;line-height:1.3;margin-bottom:16px!important;padding-bottom:8px;position:relative;letter-spacing:-.2px}.dark-mode .feature-box .feature-heading{background:linear-gradient(90deg,#6dccff,#8babff);-webkit-background-clip:text;background-clip:text}.feature-box .feature-heading::after{content:'';position:absolute;bottom:0;left:25%;right:25%;height:2px;background:linear-gradient(90deg,transparent,#4bb8ff,transparent);border-radius:2px}.feature-box p span{font-size:20px;margin-right:8px;vertical-align:middle;filter:drop-shadow(0 2px 2px rgb(0 0 0 / .1));display:inline-block;transition:transform 0.3s ease}.feature-box:hover p span{transform:scale(1.1) rotate(5deg)}.feature-box ul,.feature-box ol{padding-left:24px;margin:12px 0}.feature-box li{margin-bottom:8px;padding-left:4px}@keyframes subtleFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}.feature-box{animation:subtleFloat 6s ease-in-out infinite}@media (max-width:768px){.dark-mode .feature-box,.light-mode .feature-box{padding:24px 20px;margin-top:12px;border-radius:16px;font-size:15px}.feature-box .feature-heading{font-size:18px}.feature-box:hover{transform:translateY(-4px)}}.dark-mode .additional-info-box{background:linear-gradient(135deg,#2c3e50 0%,#1a2a3a 50%,#2575fc 100%);border-radius:18px;padding:32px 36px;margin-top:16px;line-height:1.7;font-size:15.5px;color:#fff;border:none;box-shadow:0 8px 32px rgb(0 0 0 / .25),inset 0 1px 0 rgb(255 255 255 / .1);transition:all 0.4s cubic-bezier(.175,.885,.32,1.1);position:relative;overflow:hidden;border-left:5px solid #4b8bff}.dark-mode .additional-info-box::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgb(255 255 255 / .1),transparent);z-index:1}.light-mode .additional-info-box{background:linear-gradient(135deg,#f8f9ff 0%,#e3f2fd 50%,#f0f7ff 100%);border-radius:18px;padding:28px 32px;margin-top:16px;line-height:1.7;font-size:15.5px;color:#2d3748;border:1px solid rgb(255 255 255 / .3);box-shadow:0 8px 32px rgb(0 107 255 / .08),0 4px 12px rgb(0 0 0 / .05);transition:all 0.4s cubic-bezier(.175,.885,.32,1.1);position:relative;overflow:hidden;border-left:5px solid #4b8bff}.light-mode .additional-info-box::after{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(to bottom right,rgb(255 255 255 / .3) 0%,rgb(255 255 255 / .1) 50%,transparent 100%);transform:rotate(30deg);pointer-events:none}.additional-info-box:hover{transform:translateY(-6px) scale(1.01);box-shadow:0 16px 48px rgb(0 0 0 / .2),0 8px 24px rgb(0 107 255 / .15);border-left:5px solid #6ba8ff}.dark-mode .additional-info-box:hover{background:linear-gradient(135deg,#364f6b 0%,#2a3b50 50%,#3d7afc 100%)}.light-mode .additional-info-box:hover{background:linear-gradient(135deg,#ffffff 0%,#edf6ff 50%,#f5fbff 100%)}.light-mode .additional-info-box p{white-space:pre-line;margin:0;font-weight:400;letter-spacing:.4px;line-height:1.6;color:#1a202c;text-shadow:0 1px 1px rgb(255 255 255 / .8)}.dark-mode .additional-info-box p{white-space:pre-line;margin:0;font-weight:400;letter-spacing:.4px;line-height:1.6;color:#e2e8f0;text-shadow:0 1px 2px rgb(0 0 0 / .2)}.additional-info-box .feature-heading{font-size:20px;background:linear-gradient(90deg,#4bb8ff,#6d8bff);-webkit-background-clip:text;background-clip:text;color:#fff0;text-align:center;font-weight:700!important;line-height:1.3;margin-bottom:16px!important;padding-bottom:8px;position:relative;letter-spacing:-.2px}.dark-mode .additional-info-box .feature-heading{background:linear-gradient(90deg,#6dccff,#8babff);-webkit-background-clip:text;background-clip:text}.additional-info-box .feature-heading::after{content:'';position:absolute;bottom:0;left:25%;right:25%;height:2px;background:linear-gradient(90deg,transparent,#4bb8ff,transparent);border-radius:2px}.additional-info-box p span{font-size:20px;margin-right:8px;vertical-align:middle;filter:drop-shadow(0 2px 2px rgb(0 0 0 / .1));display:inline-block;transition:transform 0.3s ease}.additional-info-box:hover p span{transform:scale(1.1) rotate(5deg)}.additional-info-box ul,.additional-info-box ol{padding-left:24px;margin:12px 0}.additional-info-box li{margin-bottom:8px;padding-left:4px}@keyframes subtleFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}.additional-info-box{animation:subtleFloat 6s ease-in-out infinite}@media (max-width:768px){.dark-mode .additional-info-box,.light-mode .additional-info-box{padding:24px 20px;margin-top:12px;border-radius:16px;font-size:15px}.additional-info-box .feature-heading{font-size:18px}.additional-info-box:hover{transform:translateY(-4px)}}}@media (min-width:478px) and (max-width:530px){.dark-mode .feature-box{background:linear-gradient(135deg,#2c3e50 0%,#1a2a3a 50%,#2575fc 100%);border-radius:18px;padding:32px 36px;margin-top:16px;line-height:1.7;font-size:15.5px;color:#fff;border:none;box-shadow:0 8px 32px rgb(0 0 0 / .25),inset 0 1px 0 rgb(255 255 255 / .1);transition:all 0.4s cubic-bezier(.175,.885,.32,1.1);position:relative;overflow:hidden;border-left:5px solid #4b8bff}.dark-mode .feature-box::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgb(255 255 255 / .1),transparent);z-index:1}.light-mode .feature-box{background:linear-gradient(135deg,#f8f9ff 0%,#e3f2fd 50%,#f0f7ff 100%);border-radius:18px;padding:28px 32px;margin-top:16px;line-height:1.7;font-size:15.5px;color:#2d3748;border:1px solid rgb(255 255 255 / .3);box-shadow:0 8px 32px rgb(0 107 255 / .08),0 4px 12px rgb(0 0 0 / .05);transition:all 0.4s cubic-bezier(.175,.885,.32,1.1);position:relative;overflow:hidden;border-left:5px solid #4b8bff}.light-mode .feature-box::after{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(to bottom right,rgb(255 255 255 / .3) 0%,rgb(255 255 255 / .1) 50%,transparent 100%);transform:rotate(30deg);pointer-events:none}.feature-box:hover{transform:translateY(-6px) scale(1.01);box-shadow:0 16px 48px rgb(0 0 0 / .2),0 8px 24px rgb(0 107 255 / .15);border-left:5px solid #6ba8ff}.dark-mode .feature-box:hover{background:linear-gradient(135deg,#364f6b 0%,#2a3b50 50%,#3d7afc 100%)}.light-mode .feature-box:hover{background:linear-gradient(135deg,#ffffff 0%,#edf6ff 50%,#f5fbff 100%)}.light-mode .feature-box p{white-space:pre-line;margin:0;font-weight:400;letter-spacing:.4px;line-height:1.6;color:#1a202c;text-shadow:0 1px 1px rgb(255 255 255 / .8)}.dark-mode .feature-box p{white-space:pre-line;margin:0;font-weight:400;letter-spacing:.4px;line-height:1.6;color:#e2e8f0;text-shadow:0 1px 2px rgb(0 0 0 / .2)}.feature-box .feature-heading{font-size:20px;background:linear-gradient(90deg,#4bb8ff,#6d8bff);-webkit-background-clip:text;background-clip:text;color:#fff0;text-align:center;font-weight:700!important;line-height:1.3;margin-bottom:16px!important;padding-bottom:8px;position:relative;letter-spacing:-.2px}.dark-mode .feature-box .feature-heading{background:linear-gradient(90deg,#6dccff,#8babff);-webkit-background-clip:text;background-clip:text}.feature-box .feature-heading::after{content:'';position:absolute;bottom:0;left:25%;right:25%;height:2px;background:linear-gradient(90deg,transparent,#4bb8ff,transparent);border-radius:2px}.feature-box p span{font-size:20px;margin-right:8px;vertical-align:middle;filter:drop-shadow(0 2px 2px rgb(0 0 0 / .1));display:inline-block;transition:transform 0.3s ease}.feature-box:hover p span{transform:scale(1.1) rotate(5deg)}.feature-box ul,.feature-box ol{padding-left:24px;margin:12px 0}.feature-box li{margin-bottom:8px;padding-left:4px}@keyframes subtleFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}.feature-box{animation:subtleFloat 6s ease-in-out infinite}@media (max-width:768px){.dark-mode .feature-box,.light-mode .feature-box{padding:24px 20px;margin-top:12px;border-radius:16px;font-size:15px}.feature-box .feature-heading{font-size:18px}.feature-box:hover{transform:translateY(-4px)}}.dark-mode .additional-info-box{background:linear-gradient(135deg,#2c3e50 0%,#1a2a3a 50%,#2575fc 100%);border-radius:18px;padding:32px 36px;margin-top:16px;line-height:1.7;font-size:15.5px;color:#fff;border:none;box-shadow:0 8px 32px rgb(0 0 0 / .25),inset 0 1px 0 rgb(255 255 255 / .1);transition:all 0.4s cubic-bezier(.175,.885,.32,1.1);position:relative;overflow:hidden;border-left:5px solid #4b8bff}.dark-mode .additional-info-box::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgb(255 255 255 / .1),transparent);z-index:1}.light-mode .additional-info-box{background:linear-gradient(135deg,#c5c6cf 0%,#e3f2fd 50%,#f0f7ff 100%);border-radius:18px;padding:28px 32px;margin-top:16px;line-height:1.7;font-size:15.5px;color:#2d3748;border:1px solid rgb(255 255 255 / .3);box-shadow:0 8px 32px rgb(0 107 255 / .08),0 4px 12px rgb(0 0 0 / .05);transition:all 0.4s cubic-bezier(.175,.885,.32,1.1);position:relative;overflow:hidden;border-left:5px solid #4b8bff}.light-mode .additional-info-box::after{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(to bottom right,rgb(255 255 255 / .3) 0%,rgb(255 255 255 / .1) 50%,transparent 100%);transform:rotate(30deg);pointer-events:none}.additional-info-box:hover{transform:translateY(-6px) scale(1.01);box-shadow:0 16px 48px rgb(0 0 0 / .2),0 8px 24px rgb(0 107 255 / .15);border-left:5px solid #6ba8ff}.dark-mode .additional-info-box:hover{background:linear-gradient(135deg,#364f6b 0%,#2a3b50 50%,#3d7afc 100%)}.light-mode .additional-info-box:hover{background:linear-gradient(135deg,#ffffff 0%,#edf6ff 50%,#f5fbff 100%)}.light-mode .additional-info-box p{white-space:pre-line;margin:0;font-weight:400;letter-spacing:.4px;line-height:1.6;color:#1a202c;text-shadow:0 1px 1px rgb(255 255 255 / .8)}.dark-mode .additional-info-box p{white-space:pre-line;margin:0;font-weight:400;letter-spacing:.4px;line-height:1.6;color:#e2e8f0;text-shadow:0 1px 2px rgb(0 0 0 / .2)}.additional-info-box .feature-heading{font-size:20px;background:linear-gradient(90deg,#4bb8ff,#6d8bff);-webkit-background-clip:text;background-clip:text;color:#fff0;text-align:center;font-weight:700!important;line-height:1.3;margin-bottom:16px!important;padding-bottom:8px;position:relative;letter-spacing:-.2px}.dark-mode .additional-info-box .feature-heading{background:linear-gradient(90deg,#6dccff,#8babff);-webkit-background-clip:text;background-clip:text}.additional-info-box .feature-heading::after{content:'';position:absolute;bottom:0;left:25%;right:25%;height:2px;background:linear-gradient(90deg,transparent,#4bb8ff,transparent);border-radius:2px}.additional-info-box p span{font-size:20px;margin-right:8px;vertical-align:middle;filter:drop-shadow(0 2px 2px rgb(0 0 0 / .1));display:inline-block;transition:transform 0.3s ease}.additional-info-box:hover p span{transform:scale(1.1) rotate(5deg)}.additional-info-box ul,.additional-info-box ol{padding-left:24px;margin:12px 0}.additional-info-box li{margin-bottom:8px;padding-left:4px}@keyframes subtleFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}.additional-info-box{animation:subtleFloat 6s ease-in-out infinite}@media (max-width:768px){.dark-mode .additional-info-box,.light-mode .additional-info-box{padding:24px 20px;margin-top:12px;border-radius:16px;font-size:15px}.additional-info-box .feature-heading{font-size:18px}.additional-info-box:hover{transform:translateY(-4px)}}}@media (min-width:631px) and (max-width:799px){.dark-mode .feature-box{background:linear-gradient(135deg,#2c3e50 0%,#1a2a3a 50%,#2575fc 100%);border-radius:18px;padding:32px 36px;margin-top:16px;line-height:1.7;font-size:15.5px;color:#fff;border:none;box-shadow:0 8px 32px rgb(0 0 0 / .25),inset 0 1px 0 rgb(255 255 255 / .1);transition:all 0.4s cubic-bezier(.175,.885,.32,1.1);position:relative;overflow:hidden;border-left:5px solid #4b8bff}.dark-mode .feature-box::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgb(255 255 255 / .1),transparent);z-index:1}.light-mode .feature-box{background:linear-gradient(135deg,#f8f9ff 0%,#e3f2fd 50%,#f0f7ff 100%);border-radius:18px;padding:28px 32px;margin-top:16px;line-height:1.7;font-size:15.5px;color:#2d3748;border:1px solid rgb(255 255 255 / .3);box-shadow:0 8px 32px rgb(0 107 255 / .08),0 4px 12px rgb(0 0 0 / .05);transition:all 0.4s cubic-bezier(.175,.885,.32,1.1);position:relative;overflow:hidden;border-left:5px solid #4b8bff}.light-mode .feature-box::after{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(to bottom right,rgb(255 255 255 / .3) 0%,rgb(255 255 255 / .1) 50%,transparent 100%);transform:rotate(30deg);pointer-events:none}.feature-box:hover{transform:translateY(-6px) scale(1.01);box-shadow:0 16px 48px rgb(0 0 0 / .2),0 8px 24px rgb(0 107 255 / .15);border-left:5px solid #6ba8ff}.dark-mode .feature-box:hover{background:linear-gradient(135deg,#364f6b 0%,#2a3b50 50%,#3d7afc 100%)}.light-mode .feature-box:hover{background:linear-gradient(135deg,#ffffff 0%,#edf6ff 50%,#f5fbff 100%)}.light-mode .feature-box p{white-space:pre-line;margin:0;font-weight:400;letter-spacing:.4px;line-height:1.6;color:#1a202c;text-shadow:0 1px 1px rgb(255 255 255 / .8)}.dark-mode .feature-box p{white-space:pre-line;margin:0;font-weight:400;letter-spacing:.4px;line-height:1.6;color:#e2e8f0;text-shadow:0 1px 2px rgb(0 0 0 / .2)}.feature-box .feature-heading{font-size:20px;background:linear-gradient(90deg,#4bb8ff,#6d8bff);-webkit-background-clip:text;background-clip:text;color:#fff0;text-align:center;font-weight:700!important;line-height:1.3;margin-bottom:16px!important;padding-bottom:8px;position:relative;letter-spacing:-.2px}.dark-mode .feature-box .feature-heading{background:linear-gradient(90deg,#6dccff,#8babff);-webkit-background-clip:text;background-clip:text}.feature-box .feature-heading::after{content:'';position:absolute;bottom:0;left:25%;right:25%;height:2px;background:linear-gradient(90deg,transparent,#4bb8ff,transparent);border-radius:2px}.feature-box p span{font-size:20px;margin-right:8px;vertical-align:middle;filter:drop-shadow(0 2px 2px rgb(0 0 0 / .1));display:inline-block;transition:transform 0.3s ease}.feature-box:hover p span{transform:scale(1.1) rotate(5deg)}.feature-box ul,.feature-box ol{padding-left:24px;margin:12px 0}.feature-box li{margin-bottom:8px;padding-left:4px}@keyframes subtleFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}.feature-box{animation:subtleFloat 6s ease-in-out infinite}@media (max-width:768px){.dark-mode .feature-box,.light-mode .feature-box{padding:24px 20px;margin-top:12px;border-radius:16px;font-size:15px}.feature-box .feature-heading{font-size:18px}.feature-box:hover{transform:translateY(-4px)}}.dark-mode .additional-info-box{background:linear-gradient(135deg,#2c3e50 0%,#1a2a3a 50%,#2575fc 100%);border-radius:18px;padding:32px 36px;margin-top:16px;line-height:1.7;font-size:15.5px;color:#fff;border:none;box-shadow:0 8px 32px rgb(0 0 0 / .25),inset 0 1px 0 rgb(255 255 255 / .1);transition:all 0.4s cubic-bezier(.175,.885,.32,1.1);position:relative;overflow:hidden;border-left:5px solid #4b8bff}.dark-mode .additional-info-box::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgb(255 255 255 / .1),transparent);z-index:1}.light-mode .additional-info-box{background:linear-gradient(135deg,#f8f9ff 0%,#e3f2fd 50%,#f0f7ff 100%);border-radius:18px;padding:28px 32px;margin-top:16px;line-height:1.7;font-size:15.5px;color:#2d3748;border:1px solid rgb(255 255 255 / .3);box-shadow:0 8px 32px rgb(0 107 255 / .08),0 4px 12px rgb(0 0 0 / .05);transition:all 0.4s cubic-bezier(.175,.885,.32,1.1);position:relative;overflow:hidden;border-left:5px solid #4b8bff}.light-mode .additional-info-box::after{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(to bottom right,rgb(255 255 255 / .3) 0%,rgb(255 255 255 / .1) 50%,transparent 100%);transform:rotate(30deg);pointer-events:none}.additional-info-box:hover{transform:translateY(-6px) scale(1.01);box-shadow:0 16px 48px rgb(0 0 0 / .2),0 8px 24px rgb(0 107 255 / .15);border-left:5px solid #6ba8ff}.dark-mode .additional-info-box:hover{background:linear-gradient(135deg,#364f6b 0%,#2a3b50 50%,#3d7afc 100%)}.light-mode .additional-info-box:hover{background:linear-gradient(135deg,#ffffff 0%,#edf6ff 50%,#f5fbff 100%)}.light-mode .additional-info-box p{white-space:pre-line;margin:0;font-weight:400;letter-spacing:.4px;line-height:1.6;color:#1a202c;text-shadow:0 1px 1px rgb(255 255 255 / .8)}.dark-mode .additional-info-box p{white-space:pre-line;margin:0;font-weight:400;letter-spacing:.4px;line-height:1.6;color:#e2e8f0;text-shadow:0 1px 2px rgb(0 0 0 / .2)}.additional-info-box .feature-heading{font-size:20px;background:linear-gradient(90deg,#4bb8ff,#6d8bff);-webkit-background-clip:text;background-clip:text;color:#fff0;text-align:center;font-weight:700!important;line-height:1.3;margin-bottom:16px!important;padding-bottom:8px;position:relative;letter-spacing:-.2px}.dark-mode .additional-info-box .feature-heading{background:linear-gradient(90deg,#6dccff,#8babff);-webkit-background-clip:text;background-clip:text}.additional-info-box .feature-heading::after{content:'';position:absolute;bottom:0;left:25%;right:25%;height:2px;background:linear-gradient(90deg,transparent,#4bb8ff,transparent);border-radius:2px}.additional-info-box p span{font-size:20px;margin-right:8px;vertical-align:middle;filter:drop-shadow(0 2px 2px rgb(0 0 0 / .1));display:inline-block;transition:transform 0.3s ease}.additional-info-box:hover p span{transform:scale(1.1) rotate(5deg)}.additional-info-box ul,.additional-info-box ol{padding-left:24px;margin:12px 0}.additional-info-box li{margin-bottom:8px;padding-left:4px}@keyframes subtleFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}.additional-info-box{animation:subtleFloat 6s ease-in-out infinite}@media (max-width:768px){.dark-mode .additional-info-box,.light-mode .additional-info-box{padding:24px 20px;margin-top:12px;border-radius:16px;font-size:15px}.additional-info-box .feature-heading{font-size:18px}.additional-info-box:hover{transform:translateY(-4px)}}}@media (min-width:800px) and (max-width:899px){.dark-mode .additional-info-box{background:linear-gradient(135deg,#2c3e50 0%,#1a2a3a 50%,#2575fc 100%);border-radius:18px;padding:32px 36px;margin-top:16px;line-height:1.7;font-size:15.5px;color:#fff;border:none;box-shadow:0 8px 32px rgb(0 0 0 / .25),inset 0 1px 0 rgb(255 255 255 / .1);transition:all 0.4s cubic-bezier(.175,.885,.32,1.1);position:relative;overflow:hidden;border-left:5px solid #4b8bff}.dark-mode .additional-info-box::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgb(255 255 255 / .1),transparent);z-index:1}.light-mode .additional-info-box{background:linear-gradient(135deg,#f8f9ff 0%,#e3f2fd 50%,#f0f7ff 100%);border-radius:18px;padding:28px 32px;margin-top:16px;line-height:1.7;font-size:15.5px;color:#2d3748;border:1px solid rgb(255 255 255 / .3);box-shadow:0 8px 32px rgb(0 107 255 / .08),0 4px 12px rgb(0 0 0 / .05);transition:all 0.4s cubic-bezier(.175,.885,.32,1.1);position:relative;overflow:hidden;border-left:5px solid #4b8bff}.light-mode .additional-info-box::after{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(to bottom right,rgb(255 255 255 / .3) 0%,rgb(255 255 255 / .1) 50%,transparent 100%);transform:rotate(30deg);pointer-events:none}.additional-info-box:hover{transform:translateY(-6px) scale(1.01);box-shadow:0 16px 48px rgb(0 0 0 / .2),0 8px 24px rgb(0 107 255 / .15);border-left:5px solid #6ba8ff}.dark-mode .additional-info-box:hover{background:linear-gradient(135deg,#364f6b 0%,#2a3b50 50%,#3d7afc 100%)}.light-mode .additional-info-box:hover{background:linear-gradient(135deg,#ffffff 0%,#edf6ff 50%,#f5fbff 100%)}.light-mode .additional-info-box p{white-space:pre-line;margin:0;font-weight:400;letter-spacing:.4px;line-height:1.6;color:#1a202c;text-shadow:0 1px 1px rgb(255 255 255 / .8)}.dark-mode .additional-info-box p{white-space:pre-line;margin:0;font-weight:400;letter-spacing:.4px;line-height:1.6;color:#e2e8f0;text-shadow:0 1px 2px rgb(0 0 0 / .2)}.additional-info-box .feature-heading{font-size:20px;background:linear-gradient(90deg,#4bb8ff,#6d8bff);-webkit-background-clip:text;background-clip:text;color:#fff0;text-align:center;font-weight:700!important;line-height:1.3;margin-bottom:16px!important;padding-bottom:8px;position:relative;letter-spacing:-.2px}.dark-mode .additional-info-box .feature-heading{background:linear-gradient(90deg,#6dccff,#8babff);-webkit-background-clip:text;background-clip:text}.additional-info-box .feature-heading::after{content:'';position:absolute;bottom:0;left:25%;right:25%;height:2px;background:linear-gradient(90deg,transparent,#4bb8ff,transparent);border-radius:2px}.additional-info-box p span{font-size:20px;margin-right:8px;vertical-align:middle;filter:drop-shadow(0 2px 2px rgb(0 0 0 / .1));display:inline-block;transition:transform 0.3s ease}.additional-info-box:hover p span{transform:scale(1.1) rotate(5deg)}.additional-info-box ul,.additional-info-box ol{padding-left:24px;margin:12px 0}.additional-info-box li{margin-bottom:8px;padding-left:4px}@keyframes subtleFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}.additional-info-box{animation:subtleFloat 6s ease-in-out infinite}@media (max-width:768px){.dark-mode .additional-info-box,.light-mode .additional-info-box{padding:24px 20px;margin-top:12px;border-radius:16px;font-size:15px}.additional-info-box .feature-heading{font-size:18px}.additional-info-box:hover{transform:translateY(-4px)}}}@media (min-width:900px) and (max-width:1700px){.dark-mode .additional-info-box{background:linear-gradient(135deg,#2c3e50 0%,#1a2a3a 50%,#2575fc 100%);border-radius:18px;padding:32px 36px;margin-top:16px;line-height:1.7;font-size:15.5px;color:#fff;border:none;box-shadow:0 8px 32px rgb(0 0 0 / .25),inset 0 1px 0 rgb(255 255 255 / .1);transition:all 0.4s cubic-bezier(.175,.885,.32,1.1);position:relative;overflow:hidden;border-left:5px solid #4b8bff}.dark-mode .additional-info-box::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgb(255 255 255 / .1),transparent);z-index:1}.light-mode .additional-info-box{background:linear-gradient(135deg,#f8f9ff 0%,#e3f2fd 50%,#f0f7ff 100%);border-radius:18px;padding:28px 32px;margin-top:16px;line-height:1.7;font-size:15.5px;color:#2d3748;border:1px solid rgb(255 255 255 / .3);box-shadow:0 8px 32px rgb(0 107 255 / .08),0 4px 12px rgb(0 0 0 / .05);transition:all 0.4s cubic-bezier(.175,.885,.32,1.1);position:relative;overflow:hidden;border-left:5px solid #4b8bff}.light-mode .additional-info-box::after{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(to bottom right,rgb(255 255 255 / .3) 0%,rgb(255 255 255 / .1) 50%,transparent 100%);transform:rotate(30deg);pointer-events:none}.additional-info-box:hover{transform:translateY(-6px) scale(1.01);box-shadow:0 16px 48px rgb(0 0 0 / .2),0 8px 24px rgb(0 107 255 / .15);border-left:5px solid #6ba8ff}.dark-mode .additional-info-box:hover{background:linear-gradient(135deg,#364f6b 0%,#2a3b50 50%,#3d7afc 100%)}.light-mode .additional-info-box:hover{background:linear-gradient(135deg,#ffffff 0%,#edf6ff 50%,#f5fbff 100%)}.light-mode .additional-info-box p{white-space:pre-line;margin:0;font-weight:400;letter-spacing:.4px;line-height:1.6;color:#1a202c;text-shadow:0 1px 1px rgb(255 255 255 / .8)}.dark-mode .additional-info-box p{white-space:pre-line;margin:0;font-weight:400;letter-spacing:.4px;line-height:1.6;color:#e2e8f0;text-shadow:0 1px 2px rgb(0 0 0 / .2)}.additional-info-box .feature-heading{font-size:20px;background:linear-gradient(90deg,#4bb8ff,#6d8bff);-webkit-background-clip:text;background-clip:text;color:#fff0;text-align:center;font-weight:700!important;line-height:1.3;margin-bottom:16px!important;padding-bottom:8px;position:relative;letter-spacing:-.2px}.dark-mode .additional-info-box .feature-heading{background:linear-gradient(90deg,#6dccff,#8babff);-webkit-background-clip:text;background-clip:text}.additional-info-box .feature-heading::after{content:'';position:absolute;bottom:0;left:25%;right:25%;height:2px;background:linear-gradient(90deg,transparent,#4bb8ff,transparent);border-radius:2px}.additional-info-box p span{font-size:20px;margin-right:8px;vertical-align:middle;filter:drop-shadow(0 2px 2px rgb(0 0 0 / .1));display:inline-block;transition:transform 0.3s ease}.additional-info-box:hover p span{transform:scale(1.1) rotate(5deg)}.additional-info-box ul,.additional-info-box ol{padding-left:24px;margin:12px 0}.additional-info-box li{margin-bottom:8px;padding-left:4px}@keyframes subtleFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}.additional-info-box{animation:subtleFloat 6s ease-in-out infinite}@media (max-width:768px){.dark-mode .additional-info-box,.light-mode .additional-info-box{padding:24px 20px;margin-top:12px;border-radius:16px;font-size:15px}.additional-info-box .feature-heading{font-size:18px}.additional-info-box:hover{transform:translateY(-4px)}}.notify.error{padding:15px;font-size:16px;width:13rem;white-space:normal;background:linear-gradient(135deg,#893b31,#27120f)}}.light-mode .container-e{max-width:1100px;width:100%;background:linear-gradient(to bottom,#eec5c5 2%,#b0efd8 100%);padding:40px;margin:0 auto;border-radius:12px;box-shadow:0 4px 12px rgb(0 0 0 / .1)}.dark-mode .container-e{max-width:1100px;width:100%;background:linear-gradient(to right,#3f6b97 1%,#35cd95 100%);padding:40px;margin:0 auto;border-radius:12px;box-shadow:0 4px 12px rgb(0 0 0 / .1)}h2{text-align:center;color:#333;margin-bottom:20px;font-weight:600}h3{text-align:center;color:#333;margin-bottom:20px;font-weight:600}.dark-mode h3{text-align:center;color:#fcf8f8;margin-bottom:20px;font-weight:600}.light-mode h3{text-align:center;color:#333;margin-bottom:20px;font-weight:600}@media (max-width:477px){#product-list{display:flexbox;gap:20px}}@media (min-width:600px) and (max-width:786px){#product-list{display:flexbox;gap:20px}}@media (min-width:787px) and (max-width:1100px){#product-list{display:flexbox;gap:20px}}@media (min-width:1101px) and (max-width:1500px){#product-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}}.dark-mode .product,.dark-mode .cart-item{background:linear-gradient(to top,#5190d0 1%,#35cd95 100%);padding:15px;border-radius:14px;display:flex;align-items:center;justify-content:space-between;transition:0.3s;border:5px solid #fff0;background-clip:padding-box,border-box;background-origin:padding-box,border-box;background-image:linear-gradient(to right,#2f867c 1%,#59b296 100%),linear-gradient(120deg,#3367D6,#C5221F,#68ffed,#188038,#9233d6);background-size:100% 100%,300% 300%;animation:borderFlow 6s ease infinite,glowPulse 2s ease-in-out infinite}@keyframes borderFlow{0%{background-position:0% 50%,0% 50%}50%{background-position:0% 50%,100% 50%}100%{background-position:0% 50%,0% 50%}}@keyframes glowPulse{0%,100%{box-shadow:0 0 45px #f3e0af,0 0 60px rgb(191 199 142 / .993)}50%{box-shadow:0 0 45px #f1cece,0 0 60px #ebcde8}}.fixed-text-color{color:#000!important;font-weight:400;font-size:1rem;line-height:1.5;margin:.5em 0;text-align:left}.light-mode .product,.light-mode .cart-item{background:linear-gradient(to right,#eec5c5 2%,#b0efd8 100%);padding:15px;border-radius:10px;display:flex;align-items:center;justify-content:space-between;transition:0.3s;border:5px solid #fff0;background-clip:padding-box,border-box;background-origin:padding-box,border-box;background-image:linear-gradient(to right,#cbc6ad 2%,#8ae6e4 100%),linear-gradient(120deg,#32f032,#00ff04,#ff00a2,#ee4cee,#635dd6);background-size:100% 100%,300% 300%;animation:borderFlow 6s ease infinite,glowPulse 2s ease-in-out infinite}@keyframes borderFlow{0%{background-position:0% 50%,0% 50%}50%{background-position:0% 50%,100% 50%}100%{background-position:0% 50%,0% 50%}}@keyframes glowPulse{0%,100%{box-shadow:0 0 15px #1a89a8,0 0 30px rgb(251 58 251 / .6)}50%{box-shadow:0 0 25px #f49696,0 0 40px rgb(140 137 240 / .989)}}.product:hover,.cart-item:hover{box-shadow:0 6px 12px rgb(0 0 0 / .15);transform:scale(1.02)}.product img,.cart-item img{width:60px;height:60px;object-fit:cover;border-radius:8px}.btn{padding:.7em 1.2em;border:none;cursor:pointer;border-radius:10px;font-weight:600;font-size:15px;transition:all 0.25s ease;display:inline-block;text-align:center;text-decoration:none;letter-spacing:.3px;box-shadow:0 3px 6px rgb(0 0 0 / .08)}.btn-primary{background:linear-gradient(135deg,#007bff,#0056b3);color:#fff}.btn-primary:hover{background:linear-gradient(135deg,#0056b3,#004494);transform:translateY(-2px);box-shadow:0 5px 12px rgb(0 123 255 / .25)}.btn-primary:active{transform:scale(.97)}.btn-danger{background:linear-gradient(135deg,#dc3545,#b02a37);color:#fff}.btn-danger:hover{background:linear-gradient(135deg,#b02a37,#8e1e28);transform:translateY(-2px);box-shadow:0 5px 12px rgb(220 53 70 / .42)}.btn-danger:active{transform:scale(.97)}.btn-a{padding:10px 10px;border:none;cursor:pointer;border-radius:10px;font-weight:600;margin-left:27px;font-size:15px;transition:all 0.25s ease;display:inline-block;text-align:center;text-decoration:none;letter-spacing:.3px;box-shadow:0 3px 6px rgb(0 0 0 / .08)}.btn-b{padding:5px 6px;border:none;cursor:pointer;border-radius:10px;font-weight:600;font-size:15px;transition:all 0.25s ease;display:inline-block;text-align:center;text-decoration:none;letter-spacing:.3px;box-shadow:0 3px 6px rgb(0 0 0 / .08)}.btn-c{padding:6px 13px;border:none;cursor:pointer;border-radius:10px;font-weight:600;font-size:15px;transition:all 0.25s ease;display:inline-block;text-align:center;text-decoration:none;letter-spacing:.3px;box-shadow:0 3px 6px rgb(0 0 0 / .08)}.btn-d{padding:6px 14px;border:none;cursor:pointer;border-radius:10px;font-weight:600;font-size:15px;transition:all 0.25s ease;display:inline-block;text-align:center;text-decoration:none;letter-spacing:.3px;box-shadow:0 3px 6px rgb(0 0 0 / .08)}@media (max-width:1500px){.light-mode h2{font-weight:700;color:#222}.dark-mode h2{font-weight:700;color:#fff}.light-mode #cart-list .cart-item,.product{margin-bottom:15px}.dark-mode #cart-list .cart-item,.product{margin-bottom:15px}.light-mode #cart-sidebar .cart-item,.product{margin-bottom:15px}.dark-mode #cart-sidebar .cart-item,.product{margin-bottom:15px}.cart-item-actions{display:flex;flex-direction:column;justify-content:flex-end;gap:7px;flex-wrap:wrap}}@media (max-width:600px){.light-mode h2{font-weight:700;color:#222}.light-mode #cart-list .cart-item,.product{padding:14px;margin-bottom:15px}.dark-mode #cart-list .cart-item,.product{padding:14px;margin-bottom:15px}.dark-mode h2{font-weight:700;color:#fff}.light-mode #cart-sidebar .cart-item,.product{margin-bottom:15px}.dark-mode #cart-sidebar .cart-item,.product{margin-bottom:15px}.cart-item-actions{display:flex;justify-content:flex-end;gap:2px;flex-wrap:wrap}}@media (max-width:477px){.light-mode #cart-sidebar .cart-item,.product{margin-bottom:15px}.dark-mode #cart-sidebar .cart-item,.product{margin-bottom:15px}.light-mode h2{font-size:22px;font-weight:700;color:#222}.dark-mode h2{font-size:22px;font-weight:700;color:#fff}.cart-item-actions{display:flex;justify-content:flex-end;gap:2px;flex-wrap:wrap}.light-mode #cart-list .cart-item,.product{display:flex;flex-direction:column;padding:14px;margin-bottom:15px;background:linear-gradient(to bottom,#eec5c5 2%,#b0efd8 100%);border-radius:14px;box-shadow:0 4px 10px rgb(0 0 0 / .1);border:1px solid #f1f1f1;transition:0.25s ease;border:5px solid #fff0;background-clip:padding-box,border-box;background-origin:padding-box,border-box;background-image:linear-gradient(to right,#cbc6ad 2%,#8ae6e4 100%),linear-gradient(120deg,#32f032,#00ff04,#ff00a2,#ee4cee,#635dd6);background-size:100% 100%,300% 300%;animation:borderFlow 6s ease infinite,glowPulse 2s ease-in-out infinite}@keyframes borderFlow{0%{background-position:0% 50%,0% 50%}50%{background-position:0% 50%,100% 50%}100%{background-position:0% 50%,0% 50%}}.dark-mode #cart-list .cart-item,.product{display:flex;flex-direction:column;padding:14px;margin-bottom:15px;background:linear-gradient(to bottom,#3f6b97 1%,#35cd95 100%);border-radius:14px;box-shadow:0 4px 10px rgb(0 0 0 / .1);border:1px solid #f1f1f1;transition:0.25s ease;border:5px solid #fff0;background-clip:padding-box,border-box;background-origin:padding-box,border-box;background-image:linear-gradient(to right,#2f867c 1%,#59b296 100%),linear-gradient(120deg,#3367D6,#C5221F,#68ffed,#188038,#9233d6);background-size:100% 100%,300% 300%;animation:borderFlow 6s ease infinite,glowPulse 2s ease-in-out infinite}@keyframes borderFlow{0%{background-position:0% 50%,0% 50%}50%{background-position:0% 50%,100% 50%}100%{background-position:0% 50%,0% 50%}}.btn-delete-a{margin-top:20%}.btn-delete{background:linear-gradient(135deg,#dc3545,#b02a37);color:#fff;border-radius:0;font-size:15px;padding:9px 10px}}@media (min-width:478px) and (max-width:600px){.btn-delete-a{margin-top:20%}.btn-delete{background:linear-gradient(135deg,#dc3545,#b02a37);color:#fff;border-radius:0;font-size:15px;padding:9px 10px}}@media (min-width:601px) and (max-width:899px){.btn-delete-a{margin-top:20%}.btn-delete{background:linear-gradient(135deg,#dc3545,#b02a37);color:#fff;border-radius:0;font-size:15px;padding:9px 10px}}@media (min-width:900px) and (max-width:1300px){.btn-delete-a{margin-top:20%}.btn-delete{background:linear-gradient(135deg,#dc3545,#b02a37);color:#fff;border-radius:0;font-size:15px;padding:9px 10px}}.btn-delete{background:linear-gradient(135deg,#dc3545,#b02a37);color:#fff;border-radius:0}.btn-delete:hover{background:linear-gradient(135deg,#b02a37,#8e1e28);transform:translateY(-2px);box-shadow:0 5px 12px rgb(220 53 69 / .25)}.btn-delete:active{transform:scale(.97)}.btn-delete-a{background:linear-gradient(135deg,#dc3545,#b02a37);color:#fff;border-radius:0}.btn-delete-a:hover{background:linear-gradient(135deg,#b02a37,#8e1e28);transform:translateY(-2px);box-shadow:0 5px 12px rgb(220 53 69 / .25)}.btn-delete-a:active{transform:scale(.97)}.btn-success{background:linear-gradient(135deg,#54c036,#28a745);color:#fff;font-size:15px;float:right}.btn-success:hover{background:linear-gradient(135deg,#80d377,#5ac874);transform:translateY(-2px);box-shadow:0 5px 12px rgb(72 240 0 / .728)}.btn-success:active{transform:scale(.97)}.btn-success:hover{background:linear-gradient(135deg,#60cd41,#28a745)}.btn-danger-a{background:linear-gradient(135deg,#dc3545,#b02a37);color:#fff}.btn-danger-a:hover{background:linear-gradient(135deg,#b02a37,#8e1e28);transform:translateY(-2px);box-shadow:0 5px 12px #dc3546}.btn-danger-a:active{transform:scale(.97)}.btn-danger-b{background:linear-gradient(135deg,#dc3545,#b02a37);color:#fff}.btn-danger-b:hover{background:linear-gradient(135deg,#b02a37,#8e1e28);transform:translateY(-2px);box-shadow:0 5px 12px #dc3546}.btn-danger-b:active{transform:scale(.97)}.btn-success-b{background:linear-gradient(135deg,#54c036,#28a745);color:#fff;float:right}.btn-success-b:hover{background:linear-gradient(135deg,#80d377,#5ac874);transform:translateY(-2px);box-shadow:0 5px 12px rgb(72 240 0 / .728)}.btn-success-b:active{transform:scale(.97)}.btn-success-b:hover{background:linear-gradient(135deg,#60cd41,#28a745)}.btn:disabled{background:gray;cursor:not-allowed}#cart-list{margin-top:50px}.cart-total,.cart-total-pkr{font-weight:700;text-align:right;margin-top:15px;font-size:1.3em;color:#333}.btn-container{display:relative;justify-content:space-between;margin-top:15px}.light-mode .cart-sidebar{position:fixed;top:0;right:-350px;width:300px;height:100vh;background:linear-gradient(to bottom,#eec5c5 2%,#b0efd8 100%);box-shadow:-4px 0 10px rgb(0 0 0 / .2);padding:20px;transition:right 0.3s ease-in-out;overflow-y:auto;z-index:2000}.dark-mode .cart-sidebar{position:fixed;top:0;right:-350px;width:300px;height:100vh;background:linear-gradient(to bottom,#3f6b97 1%,#35cd95 100%);box-shadow:-4px 0 10px rgb(0 0 0 / .2);padding:20px;transition:right 0.3s ease-in-out;overflow-y:auto;z-index:2000}.cart-sidebar.open{right:0}.cart-icon{position:fixed;top:2px;right:20px;background:#007bff;color:#fff;padding:8px;border-radius:13%;cursor:pointer;font-size:22px;z-index:2000;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px rgb(0 0 0 / .2);transition:transform 0.2s ease,box-shadow 0.2s ease;animation:blink-border 1s infinite}.cart-icon:hover{background:#ef0;transform:scale(1);box-shadow:0 6px 15px rgb(0 0 0 / .3);animation:blink-border 1s infinite}@keyframes blink-border{0%{border:3px solid #ef1d1d}50%{border:3px solid #0f6}100%{border:3px solid #12f3e0}}.cart-icon span{position:absolute;top:1px;right:2px;background:red;color:#fff;font-size:14px;padding:1px 6px;border-radius:50%;font-weight:700}.cart-item-content{flex-grow:1;min-width:10px}.cart-item-actions button{margin-right:5px}.product{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:15px}.product img{width:100px;height:100px;object-fit:cover}.light-mode .product span{font-weight:700;color:#333}.dark-mode .product span{font-weight:700;color:#faf1f1}.product .btn{width:100%;max-width:150px}.close-btn-a{background:linear-gradient(135deg,#ff4d6d,#e63946);color:#fff;position:relative;top:0;transform:translateY(-45px);padding:3px 7px;border-radius:8px;font-size:22px;font-weight:700;border:none;cursor:pointer;line-height:1;box-shadow:0 4px 12px rgb(0 0 0 / .15);transition:background 0.3s ease,transform 0.2s ease,color 0.3s ease}.close-btn-a:hover{background:linear-gradient(135deg,#007bff,#0056b3)}.close-btn-a:active{background:#ed1d20}.review-item{border-top:1px solid #eee;padding:6px 4px;font-size:.85em}.review-item strong{color:#007bff}.tab-box{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);width:320px;max-width:90vw;padding:15px;border-radius:12px;border:1px solid #ddd;background:#fff;box-shadow:0 8px 20px rgb(0 0 0 / .15);z-index:999}.tab-box.active{display:block}.tab-box::before{content:"";position:absolute;top:-10px;left:50%;transform:translateX(-50%);border-width:0 10px 10px 10px;border-style:solid;border-color:#fff0 #fff0 #fff #fff0}.review-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgb(213 67 67 / .5);display:none;justify-content:center;align-items:center;z-index:9999}.review-box{background:#fff;padding:20px;border-radius:10px;width:90%;max-width:500px;box-shadow:0 5px 15px rgb(0 0 0 / .3)}.review-box h3{margin-top:0}.review-box input,.review-box textarea,.review-box select{width:100%;margin-bottom:10px;padding:8px;border-radius:6px;border:1px solid #ccc}.review-box button{padding:8px 12px;border:none;border-radius:6px;background:#28a745;color:#fff;cursor:pointer;margin-right:5px}.review-box button:hover{background:#218838}.review-box .close-btn{float:right;cursor:pointer;font-size:18px}.close-btn{position:absolute;top:10px;right:15px;cursor:pointer;font-size:18px;color:#555}.tab-box .close-btn{position:absolute;top:15px;right:15px;font-size:1.2em;cursor:pointer;color:#1212e5;background:#eee;border-radius:50%;width:32px;height:32px;text-align:center;line-height:32px;transition:0.2s}.tab-box .close-btn:hover{background:#ff5c5c;color:#fff}.tab-buttons{display:flex;gap:5px;justify-content:center}.tab-btn{padding:6px 14px;border:none;border-radius:8px;cursor:pointer;font-size:.9em;font-weight:900;transition:background-color 0.3s ease,color 0.3s ease,transform 0.2s ease}.light-mode .tab-btn{background:#018c99;color:#fff}.light-mode .tab-btn:hover{background:#e0f0ff;color:#004cff;transform:translateY(-2px)}.light-mode .tab-btn:active{background:#cce4ff;color:#0056b3;transform:scale(.97)}.light-mode .tab-btn.active{background:#75ade8;color:#fff;font-weight:600}.dark-mode .tab-btn{background:#6d449f;color:#fff}.dark-mode .tab-btn:hover{background:#cfb1b1;color:hsl(311 58% 26%);transform:translateY(-2px)}.dark-mode .tab-btn:active{background:#555;color:#cce4ff;transform:scale(.97)}.dark-mode .tab-btn.active{background:#222;color:#fff;font-weight:600}.tab-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgb(0 0 0 / .5);display:none;z-index:9998}.tab-overlay.active{display:block}.tab-box{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90%;max-width:500px;background:#fff;padding:20px 20px 30px 20px;border-radius:12px;box-shadow:0 10px 25px rgb(0 0 0 / .25);z-index:9999;display:none;max-height:80%;overflow-y:auto}.tab-box.active{display:block}.review-form input,.review-form textarea,.review-form select{width:100%;margin-bottom:10px;padding:8px 10px;border-radius:6px;border:1px solid #ddd;font-size:.9em}.review-form button{padding:8px 12px;border-radius:6px;border:none;background:#28a745;color:#fff;cursor:pointer;transition:0.2s}.review-form button:hover{background:#218838}[id^="main-prev-"],[id^="main-next-"],[id^="nav-prev-"],[id^="nav-next-"]{display:none!important}[id^="sidebar-prev-"],[id^="sidebar-next-"]{display:none!important}.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgb(0 0 0 / .6);justify-content:center;align-items:center;padding:10px;overflow-y:auto;z-index:1000}.modal-content{background:#fff;border-radius:16px;width:100%;max-width:420px;padding:20px;box-shadow:0 10px 25px rgb(0 0 0 / .15);position:relative;display:flex;flex-direction:column;max-height:90vh;overflow-y:auto}.close-btn{position:sticky;top:10px;right:150px;font-size:22px;font-weight:700;color:#333;cursor:pointer;z-index:100}.modal-content h3,.modal-content h4{margin-bottom:16px;text-align:center;font-weight:600}.modal-btn{width:100%;padding:12px;margin:6px 0;border-radius:10px;font-size:16px;font-weight:500;cursor:pointer;border:none;transition:0.3s}.paypal-btn{background:#0070ba;color:#fff}.easypaisa-btn{background:#28a745;color:#fff}.jazzcash-btn{background:#d32f2f;color:#fff}.submit-btn{background:#6c63ff;color:#fff}.modal-btn:hover{opacity:.9;transform:translateY(-2px)}.transaction-form,#orderSummary{display:none;background:#f7f8fa;padding:12px;border-radius:12px;margin-top:12px;overflow-y:auto;max-height:45vh;box-sizing:border-box}.transaction-form input,.transaction-form textarea{width:100%;padding:10px;margin:6px 0;border-radius:8px;border:1px solid #ccc;font-size:14px;box-sizing:border-box}#orderSummary ul{list-style:disc inside;margin:5px 0 10px 0;padding-left:10px}#orderSummary p{font-weight:600;margin:8px 0}#toast-container-a,#toast-container{position:fixed;top:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:10px}.toast{background:#111827;color:#9e1717;padding:10px 14px;border-radius:8px;opacity:0;transform:translateX(100%);transition:all 0.4s ease}.toast.show{opacity:1;transform:translateX(0)}#print-area{display:none}@media print{body *{visibility:hidden!important}#print-area,#print-area *{visibility:visible!important}#print-area{display:block!important;position:absolute;left:0;top:0;width:100%;padding:24px;box-sizing:border-box}#print-area .receipt{font-family:Arial,sans-serif}#print-area h2,#print-area h3{margin:0 0 8px;text-align:center}#print-area table{width:100%;border-collapse:collapse;margin-top:10px}#print-area th,#print-area td{border-bottom:1px solid #eee;padding:6px;text-align:left}#print-area .totals{margin-top:12px;font-weight:600}}#close-summary-btn{position:absolute;top:12px;right:15px;cursor:pointer;font-size:20px;font-weight:900;color:#fff;background:linear-gradient(135deg,#ff4d4d,#dc3545);border-radius:50%;width:35px;height:35px;padding:6px 6px;display:flex;align-items:center;justify-content:center;line-height:1;box-shadow:0 4px 10px rgb(0 0 0 / .25);transition:all 0.3s ease;backdrop-filter:blur(4px)}#close-summary-btn:hover{background:linear-gradient(135deg,#e63946,#b52a37);transform:scale(1.15) rotate(8deg);box-shadow:0 6px 16px rgb(220 53 69 / .5)}#close-summary-btn:active{transform:scale(.95)}.print-btn{background:#28a745;color:#fff;border:none;padding:8px 12px;border-radius:6px;margin-left:6px;cursor:pointer;font-weight:600;transition:all 0.25s ease;box-shadow:0 2px 6px rgb(0 0 0 / .15)}.print-btn:hover{background:#218838}.print-btn:active{transform:scale(.96)}.modal-close-btn{background:#007bff;color:#fff;border:none;padding:8px 15px;border-radius:6px;margin-right:5px;cursor:pointer;font-weight:600;transition:all 0.25s ease}.modal-close-btn:hover{background:#0069d9}.modal-close-btn:active{transform:scale(.96)}.modal-footer{text-align:right;margin-top:10px}.modal-footer button{margin-left:8px}.modern-modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgb(0 0 0 / .65);justify-content:center;align-items:center;font-family:'Poppins',sans-serif;z-index:9999}.modern-modal-content{background:#fff;border-radius:25px;width:90%;max-width:480px;padding:30px 25px;box-shadow:0 15px 40px rgb(0 0 0 / .25);position:relative;animation:fadeInUp 0.3s ease}@keyframes fadeInUp{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.modern-close{position:absolute;top:15px;right:15px;font-size:22px;font-weight:800;color:#fff;background:#e74c3c;width:32px;height:32px;border-radius:50%;text-align:center;line-height:32px;cursor:pointer;transition:0.3s}.modern-close:hover{background:#c0392b;transform:scale(1.1)}.light-mode .modern-title{font-size:25px;font-weight:700;color:#cd5b87;margin-bottom:20px}.dark-mode .modern-title{font-size:25px;font-weight:700;color:#195fa5;margin-bottom:20px}.modern-section-title{font-size:16px;font-weight:600;color:#34495e;margin:15px 0}.light-mode .modern-summary{max-height:180px;overflow-y:auto;background:#d6c9c9;border-radius:15px;padding:15px;margin-bottom:20px;border:5px solid #d25a5a}.dark-mode .modern-summary{max-height:180px;overflow-y:auto;background:#9b4b4b;border-radius:15px;padding:15px;margin-bottom:20px;border:5px solid #409750}.modern-input-group{position:relative;margin-bottom:20px;font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif}.modern-input-group input,.modern-input-group select,.modern-input-group textarea{width:100%;padding:13px 12px;border-radius:14px;border:5px solid #a66a93;background:#fff;font-size:15px;outline:none;transition:all 0.4s ease;color:#333;box-shadow:0 2px 6px rgb(0 0 0 / .05)}.modern-input-group textarea{resize:vertical;min-height:70px}.modern-input-group label{position:absolute;top:-7px;left:16px;font-size:12px;background:#fff;padding:0 6px;color:#3498db;pointer-events:none;transition:all 0.3s ease}.modern-input-group input:focus+label,.modern-input-group input:not(:placeholder-shown)+label,.modern-input-group select:focus+label,.modern-input-group select:not(:placeholder-shown)+label,.modern-input-group textarea:focus+label,.modern-input-group textarea:not(:placeholder-shown)+label{top:-7px;left:16px;font-size:11px;color:red;background:#fff;letter-spacing:.5px}.modern-input-group input:focus,.modern-input-group select:focus,.modern-input-group textarea:focus{border:5px solid #ff4ec0;box-shadow:0 4px 12px rgb(255 78 192 / .25)}.modern-input-group input:hover,.modern-input-group select:hover,.modern-input-group textarea:hover{border-color:#3498db;box-shadow:0 3px 8px rgb(52 152 219 / .15)}.modern-input-group input::placeholder,.modern-input-group textarea::placeholder{color:#aaa;font-size:14px;opacity:1}.modern-actions{display:flex;justify-content:flex-end;gap:12px}.btn-cancel-modern{background:#fff0;border:2px solid #e74c3c;color:#e74c3c;font-weight:600;padding:8px 10px;border-radius:12px;cursor:pointer;transition:0.3s;font-size:16px}.btn-cancel-modern:hover{background:#e74c3c;color:#fff}.btn-confirm-modern{border:none;background:linear-gradient(135deg,#6a11cb,#2575fc);color:#fff;font-weight:600;padding:10px 18px;border-radius:12px;cursor:pointer;transition:0.3s all;font-size:16px}.btn-confirm-modern:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgb(38 132 255 / .3)}.modern-modal-content{max-height:90vh;overflow-y:auto;padding:20px;border-radius:10px;background:#fff;box-sizing:border-box}body::-webkit-scrollbar{width:15px}body.dark-mode::-webkit-scrollbar-track{background:linear-gradient(to top,#159957,#155799);border-left:1px solid var(--cultured)}body.dark-mode::-webkit-scrollbar-thumb{background:linear-gradient(to bottom,#eec5c5 2%,#b0efd8 100%);border:3px solid var(--white);border-radius:10px}body.light-mode::-webkit-scrollbar-track{background:linear-gradient(to bottom,#eec5c5 2%,#b0efd8 100%);border-left:1px solid var(--cultured)}body.light-mode::-webkit-scrollbar-thumb{background:linear-gradient(to top,#159957,#155799);border:3px solid var(--white);border-radius:10px}body.dark-mode::-webkit-scrollbar-thumb:hover{background:hsl(0 93% 62%)}body.light-mode::-webkit-scrollbar-thumb:hover{background:hsl(261 93% 62%)}.container{padding:0 15px}.has-scrollbar{padding-bottom:5px}.has-scrollbar::-webkit-scrollbar{width:12px;height:12px}.dark-mode .has-scrollbar::-webkit-scrollbar-thumb{background:linear-gradient(to top,#159957,#155799);border:3px solid var(--white);border-radius:20px}.light-mode .has-scrollbar::-webkit-scrollbar-thumb{background:linear-gradient(to bottom,#eec5c5 2%,#b0efd8 100%);border:3px solid var(--white);border-radius:20px}.has-scrollbar:hover::-webkit-scrollbar-thumb{background:hsl(0 100% 68%)}.has-scrollbar::-webkit-scrollbar-thumb:hover{background:hsl(261 93% 62%)}.payment-info{background:#bbdcc3;padding:10px 15px;margin-bottom:12px;border-radius:6px;border:5px solid #55c3c6;font-size:14px;margin-bottom:10%}.dark-mode .payment-info{background:#466e4f;border:5px solid #b05151}.payment-info p{margin:4px 0}.modern-input-group{position:relative;margin-bottom:20px}.modern-input-group input[type="file"]{width:100%;padding:10px 12px;border:1px solid #ccc;border-radius:8px;cursor:pointer;background-color:#f9f9f9;transition:0.3s;color:#001f6e}.modern-input-group input[type="file"]:hover{border-color:#28a745;background-color:#f0fff0;color:#001f6e}.modern-input-group label{display:block;margin-bottom:6px;font-weight:600;color:#333}.modern-input-group .input-help{font-size:12px;color:#0e0e0e;margin-top:4px}@media (max-width:447px){.cart-sidebar.open{right:0}.cart-icon{position:fixed;top:450px;right:0;background:#007bff;color:#fff;padding:8px;border-radius:13%;cursor:pointer;font-size:22px;z-index:2000;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px rgb(0 0 0 / .2);transition:transform 0.2s ease,box-shadow 0.2s ease;animation:blink-border 1s infinite}.cart-icon:hover{background:#ef0;transform:scale(1);box-shadow:0 6px 15px rgb(0 0 0 / .3);animation:blink-border 1s infinite}@keyframes blink-border{0%{border:3px solid #ef1d1d}50%{border:3px solid #0f6}100%{border:3px solid #12f3e0}}.cart-icon span{position:absolute;top:1px;right:2px;background:red;color:#fff;font-size:14px;padding:1px 6px;border-radius:50%;font-weight:700}.cart-item-content{flex-grow:1;min-width:10px}.cart-item-actions button{margin-right:5px}.product{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:15px}.product img{width:100px;height:100px;object-fit:cover}.light-mode .product span{font-weight:700;color:#333}.dark-mode .product span{font-weight:700;color:#faf1f1}.product .btn{width:100%;max-width:150px}.close-btn-a{background:linear-gradient(135deg,#ff4d6d,#e63946);color:#fff;position:relative;top:0;transform:translateY(-45px);padding:4px 6px;border-radius:8px;font-size:22px;font-weight:700;border:none;cursor:pointer;line-height:1;box-shadow:0 4px 12px rgb(0 0 0 / .15);transition:background 0.3s ease,transform 0.2s ease,color 0.3s ease}.close-btn-a:hover{background:linear-gradient(135deg,#007bff,#0056b3)}.close-btn-a:active{background:#ed1d20}.tab-btn{padding:6px 14px;border:none;border-radius:8px;cursor:pointer;font-size:.6em;font-weight:900;transition:background-color 0.3s ease,color 0.3s ease,transform 0.2s ease}.light-mode .tab-btn{background:#018c99;color:#fff}.light-mode .tab-btn:hover{background:#e0f0ff;color:#004cff;transform:translateY(-2px)}.light-mode .tab-btn:active{background:#cce4ff;color:#0056b3;transform:scale(.97)}.light-mode .tab-btn.active{background:#75ade8;color:#fff;font-weight:600}.dark-mode .tab-btn{background:#6d3cac;color:#fff}.dark-mode .tab-btn:hover{background:#666;color:#e0f0ff;transform:translateY(-2px)}.dark-mode .tab-btn:active{background:#555;color:#cce4ff;transform:scale(.97)}.dark-mode .tab-btn.active{background:#222;color:#fff;font-weight:600}.close-btn{position:absolute;top:10px;right:15px;cursor:pointer;font-size:18px;color:#555}.tab-box .close-btn{position:absolute;top:15px;right:15px;font-size:1.2em;cursor:pointer;color:#f8f1f1;background:#3957eb;border-radius:50%;width:32px;height:32px;text-align:center;line-height:32px;transition:0.2s}.tab-box .close-btn:hover{background:#ff5c5c;color:#fff}.fixed-text-color{position:relative;z-index:10;color:#000!important;font-size:.9rem;line-height:1.4;font-weight:400;text-align:left;margin:.5em 0 .5em 0}}
html,
body {
    -webkit-text-size-adjust: 100%;
    margin: 0;
    padding: 0;
    font-family: "Times New Roman", Times, serif;
}
body {
    background-color: #fff;
    color: #333;
    font-family: "Times New Roman", Times, serif !important;
    transition:
        background-color 0.3s,
        color 0.3s;
}
body.light-mode {
    background-color: #fff;
    color: #333;
}
body.dark-mode {
    background-color: #333;
    color: #fff;
}
.desktop-navigation-menu .menu-title {
    color: #000;
}
body.dark-mode .desktop-navigation-menu .menu-title {
    color: #fff;
}
html,
body {
    height: 10%;
    margin: 0;
}
.main-page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100000;
    opacity: 1;
    transition: opacity 0.5s ease;
}
.main-page-loader.hidden {
    opacity: 0;
    pointer-events: none;
}
.main-loader {
    width: 16rem;
    height: 16rem;
    font-size: 13px;
    position: fixed;
    background-image: url(../images/AE-Logo-1.webp);
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
.main-loader .my-head {
    position: absolute;
    border-radius: 50%;
    border-style: solid;
    animation: preloader 4s linear infinite;
}
.main-loader .my-head:nth-child(2) {
    width: 100%;
    height: 100%;
    color: #1900ff;
    border-color: #6200ff #1500ff #fff0 #fff0;
    border-width: 0.3rem 0 0.3rem 0.3rem;
    animation-direction: reverse;
}
.main-loader .my-head .second-circle {
    position: absolute;
    width: 50%;
    height: 0.1rem;
    top: 50%;
    left: 50%;
    background-color: #fff0;
    transform: rotate(-140deg);
    transform-origin: left;
}
.main-loader .my-head .second-circle::before {
    position: absolute;
    top: -0.5em;
    right: -0.8em;
    content: "";
    width: 1rem;
    height: 1rem;
    background-color: green;
    border-radius: 50%;
    box-shadow:
        0 0 2rem,
        0 0 4rem,
        0 0 6rem,
        0 0 8rem,
        0 0 10rem,
        0 0 0 0.5rem rgb(255 255 0 / 0.1);
}
@keyframes preloader {
    to {
        transform: rotate(1turn);
    }
}
#preloader {
    transition: opacity 0.3s ease;
}
#preloader.hidden {
    opacity: 0;
    pointer-events: none;
}
.loader-progress {
    margin-top: 150px;
    font-size: 20px;
    font-weight: 1000;
    color: #ff0101;
    letter-spacing: 1.5px;
    font-family: "Poppins", sans-serif;
}
.custom-icon {
    font-size: 24px;
    padding: 5px;
    color: #3b5998;
    margin-right: 8px;
    transition: transform 0.3s;
    margin-right: 1px;
}
.custom-icon:hover {
    transform: scale(1.1);
}
.icon {
    font-size: 1px;
    padding: 0;
    color: #3b5998;
    margin-right: 1px;
    transition: transform 0.3s;
    margin-right: 2px;
}
.icon:hover {
    transform: scale(1.1);
}
.icon-btn {
    font-size: 15px;
    border: 0;
    color: #5b069c;
    border-radius: 5px;
    cursor: pointer;
}
.theme-toggle-btn {
    font-size: 30px;
    border: 0;
    color: #5b069c;
    border-radius: 5px;
    cursor: pointer;
}
.theme-toggle-btn i {
    font-size: 30px;
    margin-right: 8px;
}
.theme-icon {
    width: 51px !important;
    height: auto !important;
    margin: 0 5px;
}
.theme-icon:hover {
    transform: scale(1.1);
}
.social-icon {
    font-size: 24px;
    color: #3b5998;
    margin-right: 8px;
    transition: transform 0.3s;
    margin-right: 1px;
}
.social-icon:hover {
    transform: scale(2.1);
}
body {
    background-color: #fff;
    color: #333;
    transition:
        background-color 0.3s,
        color 0.3s;
}
body.dark-mode {
    background-color: #333;
    color: #fff;
}
.header-top {
    background-color: #e5dbe2;
}
.header-top.dark-mode {
    background-color: #444;
}
.header-main {
    background-color: #fff;
}
.header-main.dark-mode {
    background-color: #555;
}
.theme-toggle button {
    cursor: pointer;
}
:root {
    --spanish-gray: hsl(0, 0%, 60%);
    --sonic-silver: hsl(0, 0%, 47%);
    --eerie-black: hsl(0, 0%, 13%);
    --salmon-pink: hsl(353, 100%, 78%);
    --sandy-brown: hsl(29, 90%, 65%);
    --bittersweet: hsl(0, 100%, 70%);
    --ocean-green: hsl(152, 51%, 52%);
    --davys-gray: hsl(0, 0%, 33%);
    --cultured: hsl(0, 0%, 93%);
    --white: hsl(0, 100%, 100%);
    --onyx: hsl(0, 0%, 27%);
    --fs-1: 1.563rem;
    --fs-2: 1.375rem;
    --fs-3: 1.25rem;
    --fs-4: 1.125rem;
    --fs-5: 1rem;
    --fs-6: 0.938rem;
    --fs-7: 0.875rem;
    --fs-8: 0.813rem;
    --fs-9: 0.75rem;
    --fs-10: 0.688rem;
    --fs-11: 0.625rem;
    --weight-300: 300;
    --weight-400: 400;
    --weight-500: 500;
    --weight-600: 600;
    --weight-700: 700;
    --border-radius-md: 10px;
    --border-radius-sm: 5px;
    --transition-timing: 0.2s ease;
}
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
a {
    text-decoration: none;
}
li {
    list-style: none;
}
button {
    background: none;
    font: inherit;
    border: 0;
    cursor: pointer;
}
img,
button,
a {
    display: block;
}
span {
    display: inline-block;
}
html {
    font-family: Poppins, sans-serif;
    overscroll-behavior: contain;
}
input {
    display: block;
    width: 100%;
    font: inherit;
}
input::placeholder {
    font: inherit;
}
body {
    background: var(--white);
}
body::-webkit-scrollbar {
    width: 15px;
}
body.dark-mode::-webkit-scrollbar-track {
    background: linear-gradient(to top, #159957, #155799);
    border-left: 1px solid var(--cultured);
}
body.dark-mode::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #eec5c5 2%, #b0efd8 100%);
    border: 3px solid var(--white);
    border-radius: 10px;
}
body.light-mode::-webkit-scrollbar-track {
    background: linear-gradient(to bottom, #eec5c5 2%, #b0efd8 100%);
    border-left: 1px solid var(--cultured);
}
body.light-mode::-webkit-scrollbar-thumb {
    background: linear-gradient(to top, #159957, #155799);
    border: 3px solid var(--white);
    border-radius: 10px;
}
body.dark-mode::-webkit-scrollbar-thumb:hover {
    background: hsl(0 93% 62%);
}
body.light-mode::-webkit-scrollbar-thumb:hover {
    background: hsl(261 93% 62%);
}
.container {
    padding: 0 15px;
}
.has-scrollbar {
    padding-bottom: 5px;
}
.has-scrollbar::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
.dark-mode .has-scrollbar::-webkit-scrollbar-thumb {
    background: linear-gradient(to top, #159957, #155799);
    border: 3px solid var(--white);
    border-radius: 20px;
}
.light-mode .has-scrollbar::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #eec5c5 2%, #b0efd8 100%);
    border: 3px solid var(--white);
    border-radius: 20px;
}
.has-scrollbar:hover::-webkit-scrollbar-thumb {
    background: hsl(0 100% 68%);
}
.has-scrollbar::-webkit-scrollbar-thumb:hover {
    background: hsl(261 93% 62%);
}
.title {
    color: var(--eerie-black);
    font-size: var(--fs-5);
    font-weight: var(--weight-600);
    letter-spacing: 0.4px;
    text-transform: capitalize;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--cultured);
    margin-bottom: 30px;
}
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: hsl(0 0% 0% / 0.5);
    opacity: 0;
    pointer-events: none;
    z-index: 15;
    transition: 0.5s ease;
}
.overlay.active {
    opacity: 1;
    pointer-events: all;
}
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: hsl(0 0% 0% / 0.5);
    display: fixed;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 10;
    animation: popup 1s ease-in-out 5s forwards;
}
@keyframes popup {
    0% {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
    100% {
        opacity: 1;
        visibility: hidden;
        pointer-events: none;
    }
}
.modal.closed {
    display: none;
}
.modal-close-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.modal-content {
    position: relative;
    max-width: 350px;
    margin: 20px;
    background: var(--white);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    z-index: 2;
    animation: scaleUp 0.5s ease-in-out 5s forwards;
}
@keyframes scaleUp {
    0% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}
.modal-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: var(--salmon-pink);
    color: var(--white);
    font-size: 16px;
    padding: 5px;
    border-radius: var(--border-radius-sm);
}
.modal-close-btn:hover {
    opacity: 0.9;
}
.swing-badge span {
    color: #002aff;
    margin-right: 6px;
    font-weight: 700;
}
.swing-badge {
    animation: swing ease-in-out 1s infinite alternate;
    transform-origin: center -20px;
    width: auto;
    text-align: center;
    letter-spacing: 0;
    border-radius: 1px;
    align-items: baseline;
    margin-top: -5px;
    margin-inline-start: -13px;
    font-size: 15px;
    font-weight: 700;
}
.primary-swing-badge {
    background: linear-gradient(to right, #159957, #155799);
}
@keyframes swing {
    0% {
        transform: rotate(6deg);
    }
    100% {
        transform: rotate(-6deg);
    }
}
@media (min-width: 601px) and (max-width: 990px) {
    .swing-badge {
        animation: swing ease-in-out 1s infinite alternate;
        transform-origin: center -20px;
        width: auto;
        text-align: center;
        letter-spacing: 0;
        border-radius: 1px;
        align-items: baseline;
        margin-top: -5px;
        margin-inline-start: -13px;
        font-size: 15px;
    }
    .swing-badge-a {
        animation: swing ease-in-out 1s infinite alternate;
        transform-origin: center -20px;
        width: auto;
        text-align: center;
        letter-spacing: 0;
        border-radius: 1px;
        align-items: baseline;
        margin-top: -5px;
        margin-inline-start: -13px;
        font-size: 15px;
    }
    .notification-toast {
        position: fixed;
        bottom: 60px;
        margin-bottom: 40px;
        left: 20px;
        right: 20px;
        background: linear-gradient(to bottom, #eec5c5 2%, #b0efd8 100%);
        max-width: 314px;
        display: flex;
        align-items: flex-start;
        gap: 15px;
        padding: 11px;
        border-radius: var(--border-radius-md);
        box-shadow: 0 5px 20px hsl(0 0% 0% / 0.15);
        transform: translateX(calc(-100%-40px));
        transition: 0.5s ease-in-out;
        z-index: 5;
        animation: slideInOut-en 10s ease-in-out infinite;
    }
    .dark-mode .notification-toast {
        background: linear-gradient(to top, #5190d0 1%, #35cd95 100%);
    }
    @keyframes slideInOut-en {
        0%,
        45%,
        100% {
            transform: translateX(calc(-100%-40px));
            opacity: 0;
            visibility: hidden;
        }
        50%,
        95% {
            transform: translateX(0);
            opacity: 1;
            visibility: visible;
        }
    }
    .toast-en {
        animation: slideInOut-en 10s ease-in-out infinite;
        direction: ltr;
        text-align: left;
    }
    .notification-toast.closed {
        display: none;
    }
    .mobile-only-symbol-a {
        font-family: Amiri, serif;
        display: none;
    }
    @media (min-width: 601px) {
        .mobile-only-symbol-a {
            display: none;
        }
    }
    .toast-close-btn {
        position: absolute;
        top: 7px;
        right: 1px;
        color: red;
        margin-right: 8px;
    }
    .toast-close-btn:hover {
        transform: scale(1.1);
    }
    .toast-banner {
        width: 100px;
        height: 90px;
        border: 0 solid var(--cultured);
        border-radius: var(--border-radius-sm);
    }
    .toast-banner img {
        width: 110%;
        height: 110%;
        object-fit: contain;
        object-position: center;
    }
    .toast-icon {
        margin-left: 110px;
        margin-top: -15px;
    }
    .toast-detail {
        width: calc(100% - 85px);
        padding-right: 10px;
    }
    .dark-mode .toast-message {
        font-size: var(--fs-6);
        font-weight: 700;
        color: #82094a;
        margin-bottom: 5px;
        font-family: "Times New Roman", Times, serif;
        white-space: pre-line;
    }
    .light-mode .toast-message {
        font-size: var(--fs-6);
        font-weight: 700;
        margin-bottom: 5px;
        font-family: "Times New Roman", Times, serif;
        color: #9c03fa;
        white-space: pre-line;
    }
    .toast-title {
        font-size: var(--fs-5);
        font-weight: 700;
        color: #f0a;
        font-family: "Times New Roman", Times, serif;
    }
    .dark-mode .toast-title {
        font-weight: 700;
        color: #06007a;
    }
    .notification-toast-a {
        position: fixed;
        bottom: 80px;
        right: 20px;
        left: auto;
        background: linear-gradient(to bottom, #eec5c5 2%, #b0efd8 100%);
        max-width: 314px;
        display: flex;
        align-items: flex-start;
        gap: 15px;
        padding: 11px;
        border-radius: var(--border-radius-md);
        box-shadow: 0 5px 20px hsl(0 0% 0% / 0.15);
        transform: translateX(100%);
        transition: 0.5s ease-in-out;
        z-index: 5;
        animation: slideInOuturdu 10s ease-in-out infinite;
    }
    .dark-mode .notification-toast-a {
        background: linear-gradient(to top, #5190d0 1%, #35cd95 100%);
    }
    @keyframes slideInOuturdu {
        0%,
        45%,
        100% {
            transform: translateX(100%);
            opacity: 0;
            visibility: hidden;
        }
        50%,
        95% {
            transform: translateX(0);
            opacity: 1;
            visibility: visible;
        }
    }
    .notification-toast-a.closed {
        display: none;
    }
    .mobile-only-symbol {
        font-family: Amiri, serif;
        display: none;
    }
    @media (max-width: 601px) {
        .mobile-only-symbol {
            display: none;
        }
    }
    .toast-close-btn-a {
        position: absolute;
        top: 7px;
        right: 1px;
        color: red;
        margin-right: 8px;
    }
    .toast-close-btn-a:hover {
        transform: scale(1.1);
    }
    .toast-banner-a {
        width: 100px;
        height: 90px;
        border: 0 solid var(--cultured);
        border-radius: var(--border-radius-sm);
    }
    .toast-banner-a img {
        width: 110%;
        height: 110%;
        object-fit: contain;
        object-position: center;
    }
    .toast-icon-a {
        margin-left: 10px;
        margin-top: -35px;
    }
    .toast-detail-a {
        width: calc(100% - 85px);
        padding-right: 10px;
    }
    .dark-mode .toast-message-a {
        font-size: var(--fs-6);
        font-weight: 700;
        color: #82094a;
        margin-bottom: -10px;
        margin-top: -10px;
    }
    .light-mode .toast-message-a {
        font-size: var(--fs-6);
        font-weight: 700;
        margin-bottom: -10px;
        margin-top: -10px;
        font-family: "Noto Nastaliq Urdu", serif;
        color: #9c03fa;
    }
    .toast-title-a {
        font-size: var(--fs-7);
        font-weight: 700;
        color: #f0a;
        margin-top: 4px;
        direction: rtl;
        text-align: right;
        unicode-bidi: plaintext;
        font-family: "Noto Nastaliq Urdu", serif;
    }
    .dark-mode .toast-title-a {
        font-weight: 700;
        color: #06007a;
    }
}
@media (max-width: 600px) {
    .swing-badge {
        animation: swing ease-in-out 1s infinite alternate;
        transform-origin: center -20px;
        width: auto;
        text-align: center;
        letter-spacing: 0;
        border-radius: 1px;
        align-items: baseline;
        margin-top: -5px;
        margin-inline-start: -13px;
        font-size: 15px;
    }
}
@media (max-width: 477px) {
    .swing-badge {
        animation: swing ease-in-out 1s infinite alternate;
        transform-origin: center -20px;
        width: auto;
        text-align: center;
        letter-spacing: 0;
        border-radius: 1px;
        align-items: baseline;
        margin-top: -5px;
        margin-inline-start: -13px;
        font-size: 15px;
    }
}
@media (min-width: 768px) {
    .notification-toast {
        position: fixed;
        bottom: 80px;
        left: 20px;
        right: 20px;
        background: linear-gradient(to bottom, #eec5c5 2%, #b0efd8 100%);
        max-width: 314px;
        display: flex;
        align-items: flex-start;
        gap: 15px;
        padding: 11px;
        border-radius: var(--border-radius-md);
        box-shadow: 0 5px 20px hsl(0 0% 0% / 0.15);
        transform: translateX(calc(-100%-40px));
        transition: 0.5s ease-in-out;
        z-index: 5;
        animation: slideInOut 10s ease-in-out infinite;
    }
    .dark-mode .notification-toast {
        background: linear-gradient(to top, #5190d0 1%, #35cd95 100%);
    }
    @keyframes slideInOut-en {
        0%,
        45%,
        100% {
            transform: translateX(calc(-100%-40px));
            opacity: 0;
            visibility: hidden;
        }
        50%,
        95% {
            transform: translateX(0);
            opacity: 1;
            visibility: visible;
        }
    }
    .toast-en {
        animation: slideInOut-en 10s ease-in-out infinite;
        direction: ltr;
        text-align: left;
    }
    .notification-toast.closed {
        display: none;
    }
    .mobile-only-symbol-a {
        font-family: Amiri, serif;
        display: none;
    }
    .toast-title {
        font-size: var(--fs-7);
        font-weight: 700;
        color: #f0a;
        font-family: "Times New Roman", Times, serif;
        margin-top: 3px;
    }
    .dark-mode .toast-title {
        font-weight: 700;
        color: #06007a;
    }
    @media (min-width: 768px) {
        .mobile-only-symbol-a {
            display: none;
        }
    }
    .toast-close-btn {
        position: absolute;
        top: 5px;
        right: 8px;
        color: red;
        margin-right: 1px;
        border: 0 solid var(--cultured);
        border-radius: var(--border-radius-sm);
    }
    .toast-close-btn:hover {
        transform: scale(1.2);
    }
    .toast-banner {
        width: 100px;
        height: 90px;
        border: 0 solid var(--cultured);
        border-radius: var(--border-radius-sm);
    }
    .toast-banner img {
        width: 110%;
        height: 110%;
        object-fit: contain;
        object-position: center;
    }
    .toast-icon {
        margin-left: 110px;
        margin-top: -15px;
    }
    .toast-detail {
        width: calc(100% - 85px);
        padding-right: 10px;
    }
    .dark-mode .toast-message {
        font-size: var(--fs-5);
        font-weight: 700;
        color: #82094a;
        margin-bottom: 5px;
        font-family: "Times New Roman", Times, serif;
    }
    .light-mode .toast-message {
        font-size: var(--fs-5);
        font-weight: 700;
        margin-bottom: 5px;
        font-family: "Times New Roman", Times, serif;
        color: #9c03fa;
    }
    .toast-title {
        font-size: var(--fs-5);
        font-weight: 700;
        color: #f0a;
        font-family: "Times New Roman", Times, serif;
        margin-top: 4px;
    }
    .dark-mode .toast-title {
        font-weight: 700;
        color: #06007a;
    }
}
@media (max-width: 600px) {
    .notification-toast {
        position: fixed;
        bottom: 80px;
        left: 20px;
        right: 20px;
        background: linear-gradient(to bottom, #eec5c5 2%, #b0efd8 100%);
        max-width: 314px;
        display: flex;
        align-items: flex-start;
        gap: 15px;
        padding: 11px;
        border-radius: var(--border-radius-md);
        box-shadow: 0 5px 20px hsl(0 0% 0% / 0.15);
        transform: translateX(calc(-100%-40px));
        transition: 0.5s ease-in-out;
        z-index: 5;
        animation: slideInOut-en 10s ease-in-out infinite;
    }
    .dark-mode .notification-toast {
        background: linear-gradient(to top, #5190d0 1%, #35cd95 100%);
    }
    @keyframes slideInOut-en {
        0%,
        45%,
        100% {
            transform: translateX(calc(-100%-40px));
            opacity: 0;
            visibility: hidden;
        }
        50%,
        95% {
            transform: translateX(0);
            opacity: 1;
            visibility: visible;
        }
    }
    .toast-en {
        animation: slideInOut-en 10s ease-in-out infinite;
        direction: ltr;
        text-align: left;
    }
    .notification-toast.closed {
        display: none;
    }
    .mobile-only-symbol-a {
        font-family: Amiri, serif;
        display: none;
    }
    @media (min-width: 600px) {
        .mobile-only-symbol-a {
            display: none;
        }
    }
    .toast-close-btn {
        position: absolute;
        top: 7px;
        right: 1px;
        color: red;
        margin-right: 8px;
    }
    .toast-close-btn:hover {
        transform: scale(1.1);
    }
    .toast-banner {
        width: 100px;
        height: 90px;
        border: 0 solid var(--cultured);
        border-radius: var(--border-radius-sm);
    }
    .toast-banner img {
        width: 110%;
        height: 110%;
        object-fit: contain;
        object-position: center;
    }
    .toast-icon {
        margin-left: 110px;
        margin-top: -15px;
    }
    .toast-detail {
        width: calc(100% - 85px);
        padding-right: 10px;
    }
    .dark-mode .toast-message {
        font-size: var(--fs-4);
        font-weight: 700;
        color: #82094a;
        margin-bottom: 5px;
        font-family: "Times New Roman", Times, serif;
    }
    .light-mode .toast-message {
        font-size: var(--fs-4);
        font-weight: 700;
        margin-bottom: 5px;
        font-family: "Times New Roman", Times, serif;
        color: #9c03fa;
    }
    .toast-title {
        font-size: var(--fs-4);
        font-weight: 700;
        color: #f0a;
        font-family: "Times New Roman", Times, serif;
    }
    .dark-mode .toast-title {
        font-weight: 700;
        color: #06007a;
    }
}
@media (max-width: 477px) {
    .notification-toast {
        position: fixed;
        bottom: 95px;
        left: 20px;
        right: 20px;
        background: linear-gradient(to bottom, #eec5c5 2%, #b0efd8 100%);
        max-width: 317px;
        display: flex;
        align-items: flex-start;
        gap: 15px;
        padding: 10px;
        border-radius: var(--border-radius-md);
        box-shadow: 0 5px 20px hsl(0 0% 0% / 0.15);
        transform: translateX(calc(-100%-40px));
        transition: 0.5s ease-in-out;
        z-index: 5;
        animation: slideInOut 10s ease-in-out infinite;
    }
    .dark-mode .notification-toast {
        background: linear-gradient(to top, #5190d0 1%, #35cd95 100%);
    }
    @keyframes slideInOut {
        0%,
        45%,
        100% {
            transform: translateX(calc(-100%-40px));
            opacity: 0;
            visibility: hidden;
        }
        50%,
        95% {
            transform: translateX(0);
            opacity: 1;
            visibility: visible;
        }
    }
    .notification-toast.closed {
        display: none;
    }
    .toast-close-btn {
        position: absolute;
        top: 5px;
        right: 7px;
        color: red;
        margin-right: 1px;
    }
    .toast-close-btn:hover {
        transform: scale(1.1);
    }
    .toast-banner {
        width: 100px;
        height: 90px;
        border: 0 solid var(--cultured);
        border-radius: var(--border-radius-sm);
    }
    .toast-banner img {
        width: 110%;
        height: 110%;
        object-fit: contain;
        object-position: center;
    }
    .toast-icon {
        margin-left: 116px;
        margin-top: -15px;
    }
    .toast-detail {
        width: calc(100% - 85px);
        padding-right: 10px;
    }
    .dark-mode .toast-message {
        font-size: var(--fs-5);
        font-weight: 700;
        color: #82094a;
        margin-bottom: 5px;
        font-family: "Times New Roman", Times, serif;
    }
    .light-mode .toast-message {
        font-size: var(--fs-5);
        font-weight: 700;
        margin-bottom: 5px;
        font-family: "Times New Roman", Times, serif;
        color: #9c03fa;
    }
    @media (max-width: 477px) {
        .swing-badge {
            font-size: 0;
        }
        .swing-badge span {
            font-size: 15px;
            font-weight: 700;
        }
        .mobile-only-symbol-a {
            display: inline;
        }
    }
    .toast-title {
        font-size: var(--fs-5);
        font-weight: 700;
        color: #f0a;
        font-family: "Times New Roman", Times, serif;
        margin-top: 3px;
    }
    .dark-mode .toast-title {
        font-weight: 700;
        color: #06007a;
    }
}
.swing-badge-a span {
    color: #002aff;
    margin-right: 6px;
    font-weight: 700;
}
.swing-badge-a {
    animation: swing ease-in-out 1s infinite alternate;
    transform-origin: center -20px;
    width: auto;
    text-align: center;
    letter-spacing: 0;
    border-radius: 1px;
    align-items: baseline;
    margin-top: -4px;
    margin-inline-start: -13px;
    font-size: 15px;
    font-weight: 700;
}
.primary-swing-badge {
    background: linear-gradient(to right, #159957, #155799);
}
@keyframes swing {
    0% {
        transform: rotate(6deg);
    }
    100% {
        transform: rotate(-6deg);
    }
}
@media (max-width: 600px) {
    .swing-badge-a {
        animation: swing ease-in-out 1s infinite alternate;
        transform-origin: center -20px;
        width: auto;
        text-align: center;
        letter-spacing: 0;
        border-radius: 1px;
        align-items: baseline;
        margin-top: -4px;
        margin-inline-start: -13px;
        font-size: 15px;
    }
}
@media (max-width: 600px) {
    .swing-badge-a {
        animation: swing ease-in-out 1s infinite alternate;
        transform-origin: center -20px;
        width: auto;
        text-align: center;
        letter-spacing: 0;
        border-radius: 1px;
        align-items: baseline;
        margin-top: -4px;
        margin-inline-start: -13px;
        font-size: 15px;
    }
}
@media (max-width: 477px) {
    .swing-badge-a {
        animation: swing ease-in-out 1s infinite alternate;
        transform-origin: center -20px;
        width: auto;
        text-align: center;
        letter-spacing: 0;
        border-radius: 1px;
        align-items: baseline;
        margin-top: -4px;
        margin-inline-start: -13px;
        font-size: 15px;
    }
}
@media (min-width: 768px) {
    .notification-toast-a {
        position: fixed;
        bottom: 80px;
        right: 20px;
        left: auto;
        background: linear-gradient(to bottom, #eec5c5 2%, #b0efd8 100%);
        max-width: 314px;
        display: flex;
        align-items: flex-start;
        gap: 15px;
        padding: 11px;
        border-radius: var(--border-radius-md);
        box-shadow: 0 5px 20px hsl(0 0% 0% / 0.15);
        transform: translateX(100%);
        transition: 0.5s ease-in-out;
        z-index: 5;
        animation: slideInOuturdu 10s ease-in-out infinite;
    }
    .dark-mode .notification-toast-a {
        background: linear-gradient(to top, #5190d0 1%, #35cd95 100%);
    }
    @keyframes slideInOuturdu {
        0%,
        45%,
        100% {
            transform: translateX(100%);
            opacity: 0;
            visibility: hidden;
        }
        50%,
        95% {
            transform: translateX(0);
            opacity: 1;
            visibility: visible;
        }
    }
    .notification-toast-a.closed {
        display: none;
    }
    .mobile-only-symbol {
        font-family: Amiri, serif;
        display: none;
    }
    @media (min-width: 768px) {
        .mobile-only-symbol {
            display: none;
        }
    }
    .toast-close-btn-a {
        position: absolute;
        top: 5px;
        right: 8px;
        color: red;
        margin-right: 1px;
    }
    .toast-close-btn-a:hover {
        transform: scale(1.2);
    }
    .toast-banner-a {
        width: 100px;
        height: 90px;
        border: 0 solid var(--cultured);
        border-radius: var(--border-radius-sm);
    }
    .toast-banner-a img {
        width: 110%;
        height: 110%;
        object-fit: contain;
        object-position: center;
    }
    .toast-icon-a {
        margin-left: 10px;
        margin-top: -35px;
    }
    .toast-detail-a {
        width: calc(100% - 85px);
        padding-right: 10px;
    }
    .dark-mode .toast-message-a {
        font-size: var(--fs-8);
        font-weight: 700;
        color: #82094a;
        margin-bottom: -10px;
        margin-top: -8px;
        font-family: "Noto Nastaliq Urdu", serif;
        line-height: 1.8;
    }
    .light-mode .toast-message-a {
        font-size: var(--fs-8);
        font-weight: 700;
        margin-bottom: -10px;
        margin-top: -8px;
        font-family: "Noto Nastaliq Urdu", serif;
        color: #9c03fa;
        line-height: 1.8;
    }
    .light-mode .toast-title-a {
        font-size: var(--fs-7);
        font-weight: 700;
        color: #f0a;
        font-family: "Noto Nastaliq Urdu", serif;
        margin-top: 4px;
        direction: rtl;
        text-align: right;
        unicode-bidi: plaintext;
    }
    .dark-mode .toast-title-a {
        font-size: var(--fs-7);
        font-weight: 700;
        color: #06007a;
        font-family: "Noto Nastaliq Urdu", serif;
        margin-top: 4px;
        direction: rtl;
        text-align: right;
        unicode-bidi: plaintext;
    }
}
@media (max-width: 600px) {
    .notification-toast-a {
        position: fixed;
        bottom: 80px;
        right: 20px;
        left: auto;
        background: linear-gradient(to bottom, #eec5c5 2%, #b0efd8 100%);
        max-width: 314px;
        display: flex;
        align-items: flex-start;
        gap: 15px;
        padding: 11px;
        border-radius: var(--border-radius-md);
        box-shadow: 0 5px 20px hsl(0 0% 0% / 0.15);
        transform: translateX(100%);
        transition: 0.5s ease-in-out;
        z-index: 5;
        animation: slideInOuturdu 10s ease-in-out infinite;
    }
    .dark-mode .notification-toast-a {
        background: linear-gradient(to top, #5190d0 1%, #35cd95 100%);
    }
    @keyframes slideInOuturdu {
        0%,
        45%,
        100% {
            transform: translateX(100%);
            opacity: 0;
            visibility: hidden;
        }
        50%,
        95% {
            transform: translateX(0);
            opacity: 1;
            visibility: visible;
        }
    }
    .notification-toast-a.closed {
        display: none;
    }
    .mobile-only-symbol {
        font-family: Amiri, serif;
        display: none;
    }
    @media (max-width: 600px) {
        .mobile-only-symbol {
            display: none;
        }
    }
    .toast-close-btn-a {
        position: absolute;
        top: 7px;
        right: 1px;
        color: red;
        margin-right: 8px;
    }
    .toast-close-btn-a:hover {
        transform: scale(1.1);
    }
    .toast-banner-a {
        width: 100px;
        height: 90px;
        border: 0 solid var(--cultured);
        border-radius: var(--border-radius-sm);
    }
    .toast-banner-a img {
        width: 110%;
        height: 110%;
        object-fit: contain;
        object-position: center;
    }
    .toast-icon-a {
        margin-left: 10px;
        margin-top: -35px;
    }
    .toast-detail-a {
        width: calc(100% - 85px);
        padding-right: 10px;
    }
    .dark-mode .toast-message-a {
        font-size: var(--fs-7);
        font-weight: 700;
        color: #82094a;
        margin-bottom: -10px;
        margin-top: -8px;
        font-family: "Noto Nastaliq Urdu", serif;
        line-height: 1.8;
    }
    .light-mode .toast-message-a {
        font-size: var(--fs-7);
        font-weight: 700;
        margin-bottom: -10px;
        margin-top: -8px;
        font-family: "Noto Nastaliq Urdu", serif;
        color: #9c03fa;
        line-height: 1.8;
    }
    .light-mode .toast-title-a {
        font-size: var(--fs-6);
        font-weight: 700;
        color: #f0a;
        font-family: "Noto Nastaliq Urdu", serif;
        margin-top: 4px;
        direction: rtl;
        text-align: right;
        unicode-bidi: plaintext;
    }
    .dark-mode .toast-title-a {
        font-size: var(--fs-6);
        font-weight: 700;
        color: #06007a;
        font-family: "Noto Nastaliq Urdu", serif;
        margin-top: 4px;
        direction: rtl;
        text-align: right;
        unicode-bidi: plaintext;
    }
}
@media (min-width: 601px) and (max-width: 767px) {
    .dark-mode .toast-message-a {
        font-size: var(--fs-7);
        font-weight: 700;
        color: #82094a;
        margin-bottom: -10px;
        margin-top: -8px;
        font-family: "Noto Nastaliq Urdu", serif;
        line-height: 1.8;
    }
    .light-mode .toast-message-a {
        font-size: var(--fs-7);
        font-weight: 700;
        margin-bottom: -10px;
        margin-top: -8px;
        font-family: "Noto Nastaliq Urdu", serif;
        color: #9c03fa;
        line-height: 1.8;
    }
    .light-mode .toast-title-a {
        font-size: var(--fs-6);
        font-weight: 700;
        color: #f0a;
        font-family: "Noto Nastaliq Urdu", serif;
        margin-top: 4px;
        direction: rtl;
        text-align: right;
        unicode-bidi: plaintext;
    }
    .dark-mode .toast-title-a {
        font-size: var(--fs-6);
        font-weight: 700;
        color: #06007a;
        font-family: "Noto Nastaliq Urdu", serif;
        margin-top: 4px;
        direction: rtl;
        text-align: right;
        unicode-bidi: plaintext;
    }
}
@media (max-width: 477px) {
    .notification-toast-a {
        position: fixed;
        bottom: 80px;
        right: 20px;
        left: auto;
        background: linear-gradient(to bottom, #eec5c5 2%, #b0efd8 100%);
        max-width: 314px;
        display: flex;
        align-items: flex-start;
        gap: 15px;
        padding: 11px;
        border-radius: var(--border-radius-md);
        box-shadow: 0 5px 20px hsl(0 0% 0% / 0.15);
        transform: translateX(100%);
        transition: 0.5s ease-in-out;
        z-index: 5;
        animation: slideInOuturdu 10s ease-in-out infinite;
    }
    .dark-mode .notification-toast-a {
        background: linear-gradient(to top, #5190d0 1%, #35cd95 100%);
    }
    @keyframes slideInOuturdu {
        0%,
        45%,
        100% {
            transform: translateX(100%);
            opacity: 0;
            visibility: hidden;
        }
        50%,
        95% {
            transform: translateX(0);
            opacity: 1;
            visibility: visible;
        }
    }
    .mobile-only-symbol {
        font-family: Amiri, serif;
        display: none;
    }
    .mobile-only-symbol {
        font-family: Amiri, serif;
        display: none;
    }
    @media (max-width: 477px) {
        .mobile-only-symbol {
            display: inline-flex;
        }
    }
    .notification-toast-a.closed {
        display: none;
    }
    .toast-close-btn-a {
        position: absolute;
        top: 7px;
        right: 1px;
        color: red;
        margin-right: 8px;
    }
    .toast-close-btn-a:hover {
        transform: scale(1.1);
    }
    .toast-banner-a {
        width: 100px;
        height: 90px;
        border: 0 solid var(--cultured);
        border-radius: var(--border-radius-sm);
    }
    .toast-banner-a img {
        width: 110%;
        height: 110%;
        object-fit: contain;
        object-position: center;
    }
    .toast-icon-a {
        margin-left: 10px;
        margin-top: -35px;
    }
    .toast-detail-a {
        width: calc(100% - 85px);
        padding-right: 10px;
    }
    .dark-mode .toast-message-a {
        font-size: var(--fs-6);
        font-weight: 700;
        color: #82094a;
        margin-bottom: -8px;
        margin-top: -19px;
        font-family: "Noto Nastaliq Urdu", serif;
        line-height: 1.8;
    }
    .light-mode .toast-message-a {
        font-size: var(--fs-6);
        font-weight: 700;
        margin-bottom: -8px;
        margin-top: -19px;
        font-family: "Noto Nastaliq Urdu", serif;
        color: #9c03fa;
    }
    .light-mode .toast-title-a {
        font-size: var(--fs-6);
        font-weight: 700;
        color: #f0a;
        font-family: "Noto Nastaliq Urdu", serif;
        margin-top: 4px;
        direction: rtl;
        text-align: right;
        unicode-bidi: plaintext;
    }
    .dark-mode .toast-title-a {
        font-size: var(--fs-6);
        font-weight: 700;
        color: #06007a;
        font-family: "Noto Nastaliq Urdu", serif;
        margin-top: 4px;
        direction: rtl;
        text-align: right;
        unicode-bidi: plaintext;
    }
    @media (max-width: 477px) {
        .swing-badge-a {
            font-size: 0;
        }
        .swing-badge-a span {
            font-size: 14px;
            font-weight: 700;
        }
        .mobile-only-symbol {
            display: inline;
        }
    }
}
.theme-toggle-btn {
    background: none;
    border: 0;
    cursor: pointer;
}
.theme-icon {
    width: 30px;
    height: 30px;
}
.header-top,
.header-user-actions,
.desktop-navigation-menu {
    display: none;
}
.header-main {
    padding: 20px;
    border-bottom: 1px solid var(--cultured);
    background-color: #e6eddb;
}
.header-logo {
    margin-bottom: 8px;
}
.header-logo {
    margin-top: 3px;
}
.header-logo img {
    margin: auto;
}
.header-main-a {
    padding: 20px 5;
    border-bottom: 1px solid var(--cultured);
    background-color: #e6eddb;
}
.dark-mode .header-main-a {
    padding: 20px 5;
    border-bottom: 1px solid var(--cultured);
    background-color: #faf3f3db;
}
.header-logo-a {
    margin-bottom: 8px;
}
.header-logo-a {
    margin-top: 3px;
}
.header-logo-a img {
    margin: auto;
}
.mobile-bottom-navigation {
    background: rgb(218 249 246 / 0.849);
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 500px;
    margin: auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0;
    box-shadow: 0 0 10px hsl(0 78% 52% / 0.25);
    z-index: 5;
    gap: 63px;
}
.mobile-bottom-navigation .action-btn,
.mobile-bottom-navigation .action-btn-home {
    position: relative;
    font-size: 25px;
    color: #53f137;
    padding: 5px;
}
.mobile-bottom-navigation .action-btn-home {
    margin-left: 0;
}
.mobile-bottom-navigation .action-btn {
    margin-left: 7px;
}
.mobile-bottom-navigation .count {
    background: var(--bittersweet);
    color: var(--white);
    position: absolute;
    top: 0;
    right: 0;
    font-size: 12px;
    font-weight: var(--weight-500);
    line-height: 1;
    padding: 2px 0;
    border-radius: 20px;
}
.menu-close-btn {
    margin-top: 14px;
}
.menu-close-btn:hover {
    transform: scale(1.1);
}
.light-mode .mobile-navigation-menu {
    background: rgb(189 252 252 / 0.765);
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    max-width: 400px;
    height: 100vh;
    padding: 20px;
    box-shadow: 0 0 10px hsl(0 0% 0% / 0.1);
    overflow-y: scroll;
    overscroll-behavior: contain;
    visibility: hidden;
    transition: 0.5s ease;
    z-index: 20;
}
.dark-mode .mobile-navigation-menu {
    background: rgb(122 50 167 / 0.664) !important;
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    max-width: 400px;
    height: 100vh;
    padding: 20px;
    box-shadow: 0 0 10px hsl(0 0% 0% / 0.1);
    overflow-y: scroll;
    overscroll-behavior: contain;
    visibility: hidden;
    transition: 0.5s ease;
    z-index: 20;
}
.mobile-navigation-menu.active {
    left: 0;
    visibility: visible;
}
.menu-top {
    margin-top: -35px;
    padding-bottom: 0;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid var(--cultured);
}
.menu-top .menu-title {
    color: #fe5151;
    font-size: var(--fs-1);
    font-weight: var(--weight-600);
}
.dark-mode .menu-top .menu-title {
    color: #f4e7e7;
}
.menu-top-a {
    padding-bottom: 0;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid var(--cultured);
    direction: rtl;
    font-family: "Noto Nastaliq Urdu";
}
.menu-top-a .menu-title-b {
    margin-top: 40px;
    color: #fe5151;
    font-size: var(--fs-1);
    font-weight: var(--weight-600);
    line-height: 1;
    font-family: "Noto Nastaliq Urdu";
}
.dark-mode .menu-top-a .menu-title-b {
    color: #f4e7e7;
}
.mobile-menu-category-list-a {
    margin-bottom: 30px;
    direction: rtl;
    font-family: "Noto Nastaliq Urdu";
    line-height: 2.1;
}
.mobile-menu-category-list {
    margin-bottom: 30px;
    direction: ltr;
    line-height: 1;
}
.menu-category .accordion-menu {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.mobile-menu-category-list-a .menu-category {
    border-bottom: 1px solid var(--border-radius-sm);
}
.mobile-menu-category-list-a .menu-title {
    color: rgb(0 217 255 / 0.993);
    font-size: var(--fs-3);
    font-weight: var(--weight-600);
    padding: 12px 0;
    transition:
        color 0.3s ease,
        padding 0.3s ease;
}
.mobile-menu-category-list-a .menu-title:hover {
    color: #6fff00;
    padding: 14px 9px;
}
.light-mode .mobile-menu-category-list-a .menu-title {
    color: rgb(119 0 119 / 0.89);
}
.light-mode .mobile-menu-category-list-a .menu-title:hover {
    color: rgb(0 68 255 / 0.861);
    padding: 14px 9px;
}
.mobile-menu-category-list .menu-category {
    border-bottom: 1px solid var(--border-radius-sm);
}
.mobile-menu-category-list .menu-title {
    color: rgb(0 217 255 / 0.993);
    font-size: var(--fs-3);
    font-weight: var(--weight-600);
    padding: 12px 0;
    transition:
        color 0.3s ease,
        padding 0.3s ease;
}
.mobile-menu-category-list .menu-title:hover {
    color: #6fff00;
    padding: 14px 9px;
}
.light-mode .mobile-menu-category-list .menu-title {
    color: rgb(119 0 119 / 0.89);
}
.light-mode .mobile-menu-category-list .menu-title:hover {
    color: rgb(0 68 255 / 0.861);
    padding: 14px 9px;
}
.accordion-menu > div {
    font-size: 14px;
}
.accordion-menu .fas,
.accordion-menu .far,
.accordion-menu .fab {
    color: var(--onyx);
    font-size: 90px;
}
.accordion-menu.active .add-icon,
.accordion-menu .remove-icon {
    display: none;
}
.accordion-menu .add-icon,
.accordion-menu.active .remove-icon {
    display: block;
}
.menu-category .submenu-category-list {
    margin-left: 100px;
}
.custom-select-b {
    position: relative;
    width: 200px;
    font-family: "Segoe UI", sans-serif;
}
.dropdown-arrow-b {
    margin-left: auto;
    font-size: 14px;
    pointer-events: none;
}
.custom-select-b button {
    width: 100%;
    padding: 10px 12px;
    background-color: #85ebff;
    border: 2px solid #ccc;
    border-radius: 8px;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}
.custom-select-b button:hover,
.custom-select-b button:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgb(0 123 255 / 0.2);
    outline: 0;
}
.flag-icon-d {
    width: 40px;
    height: 30px;
    margin-right: 10px;
    border-radius: 2px;
    vertical-align: middle;
}
.flag-icon-b {
    width: 20px;
    height: 14px;
    margin-right: 10px;
    border-radius: 2px;
    vertical-align: middle;
    margin-right: 8px;
}
.light-mode li a {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #0702a0;
}
.dark-mode li a {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #00fff7;
}
.dropdown-arrow-b {
    transition: transform 0.3s ease;
    margin-left: 8px;
    font-size: 20px;
    font-weight: 100px;
}
.custom-select-b.open .dropdown-arrow {
    transform: rotate(180deg);
}
.language-options-b {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 100%;
    background-color: #f9dbca;
    border: 0 solid #fd7f7f;
    border-radius: 8px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    z-index: 1000;
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.1);
}
.dark-mode .language-options-b {
    background-color: #5d7d81;
}
.language-options::-webkit-scrollbar {
    display: none;
}
.language-options-b::-webkit-scrollbar {
    display: none;
}
.language-options-b.show {
    max-height: 300px;
    overflow: auto;
}
.language-options-b li {
    padding: 10px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background-color 0.2s ease;
}
.light-mode .language-options-b li:hover {
    background-color: #f6baa8;
}
.dark-mode .language-options-b li:hover {
    background-color: #79024b;
}
.language-options::-webkit-scrollbar {
    display: none;
}
.language-options-b::-webkit-scrollbar {
    display: none;
}
.flag-icon-b {
    width: 76px;
    height: 20px;
    object-fit: contain;
}
.flag-icon-c {
    width: 49px;
    height: 20px;
    object-fit: contain;
}
.flag-icon-a {
    width: 30px;
    height: 19px;
    object-fit: contain;
}
.submenu-title:hover {
    color: #003cff;
}
.submenu-title-a:hover {
    color: #003cff;
}
.submenu-category-list {
    max-height: 0;
    overflow: hidden;
    visibility: var(--davys-gray);
    transition: 0.5s ease-in-out;
}
.submenu-category-list.active {
    max-height: 148px;
    visibility: visible;
}
.menu-bottom .menu-category-list {
    margin-bottom: 20px;
}
.menu-bottom .menu-category {
    border-bottom: none;
}
.menu-bottom .menu-title {
    font-size: var(--fs-3);
    font-weight: var(--weight-600);
    color: red;
    padding: 12px 0;
}
.accordion-menu.active .caret-back {
    transform: rotate(-0.25turn);
}
.menu-bottom .submenu-category-list {
    border: 1px solid var(--cultured);
    border-radius: var(--border-radius-md);
    padding: 0 15px;
    margin-left: 0;
    box-shadow: 0 0 10px hsl(0 63% 41% / 0.05);
}
.menu-bottom .submenu-category:not(:last-child) {
    border-bottom: 1px solid var(--cultured);
}
.accordion-menu {
    cursor: pointer;
    padding: 1px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.submenu-category-list {
    padding: 10px;
    list-style: none;
    background: #b28b8b7a;
    border: 1px solid #f00505;
}
details > .submenu-category-list {
    display: none;
}
details[open] > .submenu-category-list {
    display: block;
}
.menu-social-container {
    display: flex;
    align-items: left;
    justify-content: center;
    gap: 5px;
}
.menu-social-container .social-link-a {
    padding: 3px;
    background: #356af9;
    border-radius: var(--border-radius-sm);
    color: var(--sonic-silver);
    transition: var(--transition-timing);
    margin: 5px;
}
.menu-social-container .social-link-a:hover {
    background: #356af9;
    color: var(--white);
}
.social-link-a:hover {
    transform: scale(1.1);
}
.menu-social-container {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
    margin-bottom: 40%;
}
.menu-social-container .social-link-b {
    padding: 3px;
    background: linear-gradient(45deg, #ffde85 0, #f7792a 30%, #f7504f 40%, #d82b81 60%, #d82b81 75%, #95362c 100%);
    border-radius: var(--border-radius-sm);
    color: var(--sonic-silver);
    transition: var(--transition-timing);
    margin: 5px;
}
.menu-social-container .social-link-b:hover {
    background: linear-gradient(45deg, #ffde85 0, #f7792a 30%, #f7504f 40%, #d82b81 60%, #d82b81 75%, #95362c 100%);
    color: var(--white);
}
.social-link-b:hover {
    transform: scale(1.1);
}
.menu-social-container {
    display: flex;
    align-items: center;
    gap: 5px;
}
.menu-social-container .social-link-c {
    padding: 3px;
    background: hsl(0 100% 50%);
    border-radius: var(--border-radius-sm);
    color: var(--sonic-silver);
    transition: var(--transition-timing);
    margin: 5px;
}
.menu-social-container .social-link-c:hover {
    background: hsl(16 100% 52%);
    color: var(--white);
}
.social-link-c:hover {
    transform: scale(1.1);
}
.menu-social-container {
    display: flex;
    align-items: center;
    gap: 5px;
}
.menu-social-container .social-link-d {
    padding: 6px;
    background: #0a66c2;
    border-radius: var(--border-radius-sm);
    color: var(--sonic-silver);
    transition: var(--transition-timing);
    margin: 5px;
}
.menu-social-container .social-link-d:hover {
    background: #0a66c2;
    color: var(--white);
}
.social-link-d:hover {
    transform: scale(1.1);
}
.menu-social-container {
    display: flex;
    align-items: center;
    gap: 5px;
}
.social-link-e:hover {
    transform: scale(1.1);
}
.menu-social-container {
    display: flex;
    align-items: center;
    gap: 5px;
}
@media (min-width: 480px) {
    :root {
        --fs-1: 1.875rem;
    }
    .header-top {
        display: block;
        padding: 1px 0;
        border-bottom: 1px solid var(--cultured);
    }
    .header-social-container,
    .header-top-actions {
        display: none;
    }
    .header-alert-news {
        color: var(--sonic-silver);
        font-size: var(--fs-9);
        text-transform: uppercase;
    }
    .header-alert-news b {
        font-weight: var(--weight-500);
    }
    .header-main {
        padding: 9px 0;
    }
    .mobile-bottom-navigation {
        border-top-left-radius: var(--border-radius-md);
        border-top-right-radius: var(--border-radius-md);
    }
}
@media (min-width: 570px) {
    .header-top .container,
    .header-main .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .header-logo {
        margin-bottom: 0;
    }
    .container-a {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding: 10px 20px;
        background-color: #e6eddb;
        direction: rtl;
    }
    .dark-mode .container-a {
        background-color: #e8f7ce;
    }
    .header-logo-a img {
        width: 100px;
        height: 100px;
    }
    .marquee-container-urdu {
        margin-left: 20px;
        margin-right: 24px;
    }
    .container-b {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 10px 20px;
        background-color: #e6eddb;
    }
    .dark-mode .container-b {
        background-color: #ebdfdf;
    }
    .marquee-container {
        margin-left: 20px;
        margin-right: 24px;
    }
    .header-top-actions {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-right: 10px;
    }
    .header-top-actions select {
        border: 0;
        display: block;
        min-width: 10px;
        padding: 5px 0;
        font: inherit;
        color: var(--sonic-silver);
        font-size: var(--fs-8);
        text-transform: uppercase;
        cursor: pointer;
        transition: var(--transition-timing);
    }
    .header-top-actions select:hover {
        color: var(--eerie-black);
    }
}
@media (min-width: 768px) {
    :root {
        --fs-1: 2.375rem;
    }
    html {
        font-size: 17px;
    }
    .modal-content {
        display: flex;
        align-items: center;
        max-width: 750px;
        width: fit-content;
    }
    .header-main .container {
        gap: 20px;
    }
}
@media screen and (min-width: 768px) {
    .header-top {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 999;
    }
    #home_section {
        scroll-margin-top: 59px;
    }
    body {
        padding-top: 54px;
    }
}
@media (min-width: 768px) {
    :root {
        --fs-1: 2.625rem;
        --fs-2: 1.125rem;
    }
    .notification-toast {
        bottom: 50px;
    }
    .header-social-container {
        display: flex;
        align-items: center;
        gap: 5px;
    }
    .header-social-container .social-link-a {
        padding: 2px;
        background: #356af9;
        border-radius: var(--border-radius-sm);
        color: var(--sonic-silver);
        transition: var(--transition-timing);
    }
    .header-social-container .social-link-a:hover {
        background: #356af9;
        color: var(--white);
    }
    .social-link-a:hover {
        transform: scale(1.1);
    }
    .header-social-container {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 5px;
        margin-bottom: 5px;
    }
    .header-social-container .social-link-b {
        padding: 4px;
        background: linear-gradient(45deg, #ffde85 0, #f7792a 30%, #f7504f 40%, #d82b81 60%, #d82b81 75%, #95362c 100%);
        border-radius: var(--border-radius-sm);
        color: var(--sonic-silver);
        transition: var(--transition-timing);
    }
    .header-social-container .social-link-b:hover {
        background: linear-gradient(45deg, #ffde85 0, #f7792a 30%, #f7504f 40%, #d82b81 60%, #d82b81 75%, #95362c 100%);
        color: var(--white);
    }
    .social-link-b:hover {
        transform: scale(1.1);
    }
    .header-social-container {
        display: flex;
        align-items: center;
        gap: 5px;
    }
    .header-social-container .social-link-c {
        padding: 2px;
        background: hsl(0 100% 50%);
        border-radius: var(--border-radius-sm);
        color: var(--sonic-silver);
        transition: var(--transition-timing);
    }
    .header-social-container .social-link-c:hover {
        background: hsl(16 100% 52%);
        color: var(--white);
    }
    .social-link-c:hover {
        transform: scale(1.1);
    }
    .header-social-container {
        display: flex;
        align-items: center;
        gap: 5px;
    }
    .header-social-container .social-link-d {
        padding: 5px;
        background: #0a66c2;
        border-radius: var(--border-radius-sm);
        color: var(--sonic-silver);
        transition: var(--transition-timing);
    }
    .header-social-container .social-link-d:hover {
        background: #0a66c2;
        color: var(--white);
    }
    .social-link-d:hover {
        transform: scale(1.1);
    }
    .header-user-actions {
        display: flex;
        align-items: center;
        gap: 15px;
    }
    .header-user-actions .action-btn {
        position: relative;
        font-size: 35px;
        color: var(--onyx);
        padding: 5px;
    }
    .header-user-actions .count {
        position: absolute;
        top: -2px;
        right: -3px;
        background: var(--bittersweet);
        color: var(--white);
        font-size: 12px;
        font-weight: var(--weight-500);
        line-height: 1;
        padding: 2px 4px;
        border-radius: 20px;
    }
    .desktop-navigation-menu {
        display: block;
    }
    .desktop-menu-category-list {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 30px;
        font-family: "Noto Nastaliq Urdu";
    }
    .desktop-menu-category-list .menu-category:not(:nth-child(2)) {
        position: relative;
    }
    .desktop-menu-category-list .menu-category > .menu-title {
        position: relative;
        color: var(--onyx);
        font-size: var(--fs-3);
        font-style: bold;
        font-weight: bolder;
        text-transform: uppercase;
        padding: 15px 0;
        transition: var(--transition-timing);
    }
    .desktop-menu-category-list .menu-category > .menu-title:hover {
        color: green;
    }
    .desktop-menu-category-list .menu-category > .menu-title::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 5px;
        background: #fa2cb5;
        transform: scaleX(0);
        transform-origin: left;
        transition: var(--transition-timing);
    }
    .dark-mode .desktop-menu-category-list .menu-category > .menu-title::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 5px;
        background: #cdfa2c;
        transform: scaleX(0);
        transform-origin: left;
        transition: var(--transition-timing);
    }
    .desktop-menu-category-list .menu-category > .menu-title:hover,
    .desktop-menu-category-list .menu-category > .menu-title.active {
        color: #2903ff;
    }
    .dark-mode .desktop-menu-category-list .menu-category > .menu-title:hover,
    .dark-mode .desktop-menu-category-list .menu-category > .menu-title.active {
        color: #affed3;
    }
    .desktop-menu-category-list .menu-category > .menu-title:hover::after,
    .desktop-menu-category-list .menu-category > .menu-title.active::after {
        transform: scaleX(1);
    }
    .desktop-menu-category-list .menu-category > .menu-title:hover::after {
        transform: scaleX(1);
    }
    .dropdown-panel {
        position: absolute;
        top: 100%;
        left: 0;
        background: var(--white);
        width: 100%;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 30px;
        padding: 30px;
        border: 1px solid var(--cultured);
        box-shadow: 0 3px 5px hsl(0 0% 0% / 0.1);
        border-radius: var(--border-radius-md);
        transform: translateY(50px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: var(--transition-timing);
        z-index: 5;
    }
    .desktop-menu-category-list .menu-category:hover > .dropdown-panel {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        pointer-events: all;
    }
    .dropdown-panel-list .menu-title a {
        color: var(--onyx);
        font-size: var(--fs-7);
        font-weight: var(--weight-600);
        padding-bottom: 10px;
        border-bottom: 1px solid var(--cultured);
        margin-bottom: 10px;
    }
    .panel-list-item a {
        color: var(--sonic-silver);
        font-size: var(--fs-7);
        text-transform: capitalize;
        transition: var(--transition-timing);
    }
    .panel-list-item a:hover {
        color: #4be84b;
    }
    .panel-list-item:not(:last-child) a {
        padding: 4px 0;
    }
    .panel-list-item:last-child {
        margin-top: 20px;
    }
    .panel-list-item img {
        width: 100%;
        height: auto;
        border-radius: var(--border-radius-sm);
    }
    .dropdown-list {
        position: absolute;
        top: 100%;
        left: 0;
        width: 200px;
        background: var(--white);
        padding: 20px 0;
        border-radius: var(--border-radius-md);
        border: 1px solid var(--cultured);
        box-shadow: 0 3px 5px hsl(0 0% 0% / 0.1);
        transform: translateY(50px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: var(--transition-timing);
        z-index: 5;
    }
    .desktop-menu-category-list .menu-category:hover > .dropdown-list {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        pointer-events: all;
    }
    .dropdown-list .dropdown-item a {
        color: var(--sonic-silver);
        font-size: var(--fs-7);
        text-transform: capitalize;
        padding: 4px 20px;
        transition: var(--transition-timing);
    }
    .dropdown-list .dropdown-item a:hover {
        color: var(--salmon-pink);
    }
    .mobile-bottom-navigation {
        display: none;
    }
}
.datetime {
    display: inline-block;
    padding: 2px 20px;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: #2c3e50;
    background: linear-gradient(135deg, #f9f9f9, #eaeaea);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.08);
    transition: all 0.3s ease;
    margin-top: 1px;
    max-width: 90%;
    word-wrap: break-word;
    font-family: "Noto Nastaliq Urdu", serif;
}
.datetime:hover {
    background: linear-gradient(135deg, #f0f0f0, #dcdcdc);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgb(0 0 0 / 0.1);
}
.datetime-container {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}
@media (max-width: 767px) {
    .datetime {
        display: inline-block;
        padding: 12px 20px;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        font-size: 14px;
        font-weight: 500;
        color: #2c3e50;
        background: linear-gradient(135deg, #f9f9f9, #eaeaea);
        border-radius: 15px;
        box-shadow: 0 4px 12px rgb(0 0 0 / 0.08);
        transition: all 0.3s ease;
        margin-top: 1px;
        max-width: 90%;
        word-wrap: break-word;
        margin-left: 50px;
    }
    .datetime:hover {
        background: linear-gradient(135deg, #f0f0f0, #dcdcdc);
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgb(0 0 0 / 0.1);
    }
    .datetime-container {
        display: flex;
        justify-content: center;
        margin-top: 30px;
    }
}
.datetime-a {
    display: inline-block;
    padding: 12px 20px;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: #2c3e50;
    background: linear-gradient(135deg, #f9f9f9, #eaeaea);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.08);
    transition: all 0.3s ease;
    margin-top: 1px;
    max-width: 90%;
    word-wrap: break-word;
    margin-left: 240px;
}
.datetime-a:hover {
    background: linear-gradient(135deg, #f0f0f0, #dcdcdc);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgb(0 0 0 / 0.1);
}
.datetime-a-container {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}
@media (max-width: 767px) {
    .datetime-a {
        display: inline-block;
        padding: 12px 20px;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        font-size: 15px;
        font-weight: 500;
        color: #2c3e50;
        background: linear-gradient(135deg, #f9f9f9, #eaeaea);
        border-radius: 12px;
        box-shadow: 0 4px 12px rgb(0 0 0 / 0.08);
        transition: all 0.3s ease;
        margin-top: 1px;
        max-width: 90%;
        word-wrap: break-word;
        margin-left: 76px;
    }
    .datetime-a:hover {
        background: linear-gradient(135deg, #f0f0f0, #dcdcdc);
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgb(0 0 0 / 0.1);
    }
    .datetime-a-container {
        display: flex;
        justify-content: center;
        margin-top: 30px;
    }
}
.custom-select {
    position: relative;
    width: 200px;
    font-family: "Segoe UI", sans-serif;
    margin-right: 58px;
}
.dropdown-arrow {
    margin-left: auto;
    font-size: 14px;
    pointer-events: none;
}
.light-mode .language-options li.selected {
    background-color: #cafdaeea;
    font-weight: 700;
}
.dark-mode .language-options li.selected {
    background-color: #fc488aea;
    font-weight: 700;
}
.dark-mode .language-options-b li.selected {
    background-color: #080874;
    font-weight: 700;
}
.light-mode .language-options-b li.selected {
    background-color: #04fc42cb;
    font-weight: 700;
}
.custom-select button {
    width: 100%;
    padding: 10px 12px;
    background-color: #eaccf4;
    border: 2px solid #ccc;
    border-radius: 8px;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}
.custom-select button:hover,
.custom-select button:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgb(0 123 255 / 0.2);
    outline: violet;
}
.flag-icon {
    width: 40px;
    height: 24px;
    margin-right: 13px;
    border-radius: 2px;
}
.dropdown-arrow {
    transition: transform 0.3s ease;
    margin-left: 8px;
    font-size: 20px;
    font-weight: 100px;
}
.custom-select.open .dropdown-arrow {
    transform: rotate(180deg);
}
.language-options {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 100%;
    background-color: #bdd7fe;
    border: 0 solid #fd7f7f;
    border-radius: 8px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    z-index: 1000;
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.1);
}
.language-options li {
    list-style: none;
    padding: 0;
    margin: 0;
}
.language-options li a {
    padding: 12px 16px;
    box-sizing: border-box;
    color: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background-color 0.2s ease;
}
.language-options li:hover {
    background-color: #01c677;
    cursor: pointer;
}
.dark-mode .language-options li a {
    padding: 12px 16px;
    box-sizing: border-box;
    color: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background-color 0.2s ease;
}
.light-mode .language-options li a {
    color: #43037b;
    font-size: 18px;
}
.language-options li a .flag-icon {
    width: 40px;
    height: 24px;
    object-fit: contain;
    display: inline;
}
.dark-mode .language-options {
    background-color: #06419a;
}
.language-options.show {
    max-height: 300px;
    overflow: auto;
}
.custom-select-a {
    position: relative;
    width: 133px;
    font-family: "Segoe UI", sans-serif;
}
.custom-select-a button {
    width: 100%;
    padding: 13px 12px;
    background-color: #fbe4e4;
    border: 1px solid #f5d9d9;
    border-radius: 8px;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}
.custom-select-a button:hover,
.custom-select-a button:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgb(0 123 255 / 0.2);
    outline: 0;
}
@media (min-width: 900px) {
    .desktop-menu-category-list {
        gap: 45px;
    }
}
@media (min-width: 768px) {
    html {
        font-size: 18px;
    }
}
.separator-wrapper {
    width: 100%;
    margin: 0;
    padding: 0;
}
.separator-wrapper .separator {
    width: 100%;
    height: 3px;
    animation: rotate 6s infinite linear;
    -webkit-animation: rotate 6s infinite linear;
}
@-webkit-keyframes rotate {
    from {
        background-position: -3000px;
    }
    to {
        background-position: 0 0;
    }
}
@keyframes rotate {
    from {
        background-position: -3000px;
    }
    to {
        background-position: 0 0;
    }
}
.separator-gradient {
    background: #30ff90;
    background: -moz-linear-gradient(left, #30ff90 0, #ed2ded 25%, #c99826 50%, #59ead9 75%, #9afcc7 100%);
    background: -webkit-gradient(
        linear,
        left top,
        right top,
        color-stop(0%, #30ff90),
        color-stop(25%, #ed2ded),
        color-stop(50%, #c99826),
        color-stop(75%, #30ffe6),
        color-stop(100%, #30ff90)
    );
    background: -webkit-linear-gradient(left, #30ff90 0, #ed2ded 25%, #c99826 50%, #6bd8cc 75%, #93f7c1 100%);
    background: -o-linear-gradient(left, #30ff90 0, #ed2ded 25%, #c99826 50%, #a5f1e9 75%, #84f5b9 100%);
    background: linear-gradient(to right, #30ff90 0, #ed2ded 25%, #c99826 50%, #70aea7 75%, #62f6a7 100%);
}
.section-space-sm {
    margin-top: 100px;
}
@media (min-width: 768px) {
    .section-space-sm {
        margin-top: 100px;
    }
}
.section-space-md {
    margin-top: 50px;
}
@media (max-width: 477px) {
    .section-space-sm {
        margin-top: 10px;
    }
}
.section-space-md {
    margin-top: 50px;
}
#small-services span {
    display: inline-block;
    text-decoration: none;
}
.services-head {
    margin-bottom: 60px;
}
.service-item {
    background: linear-gradient(to right, #eec5c5 2%, #b0efd8 100%);
    text-align: center;
    padding: 30px 25px;
    -webkit-box-shadow: 0 0 25px rgb(15 4 4 / 0.07);
    box-shadow: 0 0 25px rgb(222 197 197 / 0.07);
    border-radius: 20px;
    border: 5px solid rgb(0 0 0 / 0.07);
    margin-bottom: 30px;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    font-size: 20px;
    font-family: "Gill Sans", "Gill Sans MT", "Trebuchet MS", sans-serif;
    font-size: 20px;
    margin-left: 2px;
}
.service-item:hover {
    background: #ccdee1;
    box-shadow: 0 8px 20px 0 rgb(0 0 0 / 0.2);
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.light-mode .service-item:hover .service-item,
.light-mode .service-item:hover span.icon {
    background: #fdf0008c;
    border-radius: 50px;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.dark-mode .service-item:hover .service-item,
.dark-mode .service-item:hover span.icon {
    background: #01fabc;
    border-radius: 50px;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.service-item h6 {
    font-size: 40px;
    font-family: "Gill Sans", "Gill Sans MT", "Trebuchet MS", sans-serif;
    margin-bottom: 20px;
}
.service-item:hover h6 {
    color: #4446ad;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    font-size: 34px;
    font-family: Arial, Helvetica, sans-serif;
    margin-bottom: 20px;
}
.service-item:hover p {
    color: #ce2060;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    text-align: justify;
}
.service-item .icon {
    font-size: 40px;
    margin-bottom: 25px;
    color: #f91942;
    width: 90px;
    height: 90px;
    line-height: 96px;
    border-radius: 50px;
}
.service-item p {
    color: #05564e;
    text-align: justify;
    font-size: 20px;
}
.service-item h6 {
    color: #f06c00;
}
.service-item p.lang-ur {
    direction: rtl;
    text-align: right;
    font-size: 20px;
    text-align: justify;
}
.dark-mode .service-item {
    background: linear-gradient(45deg, #6170a3 20%, #569a04 100%);
}
.dark-mode .service-item:hover .service-item,
.service-item:hover span.icon {
    background: #79acaf;
}
.dark-mode .service-item:hover h6 {
    color: #a7d7d0;
}
.dark-mode .service-item:hover p {
    color: #e2f1ef;
}
.dark-mode .service-item h6 {
    color: #f0b800;
}
.dark-mode .service-item p {
    color: #32f5f5;
    text-align: justify;
}
@keyframes move-wheel {
    0% {
        opacity: 0;
        transform: translateY(-1rem);
    }
    100% {
        opacity: 1;
        transform: translateY(1rem);
    }
}
@keyframes arrow-down {
    0% {
        opacity: 0;
    }
    25% {
        opacity: 0.25;
    }
    0% {
        opacity: 0.5;
    }
    75% {
        opacity: 0.75;
    }
    100% {
        opacity: 1;
    }
}
.light-mode .products-item {
    width: 20%;
    box-sizing: border-box;
    padding: 15px;
    text-align: center;
    max-width: 920px;
    width: 100%;
    background: -webkit-linear-gradient(left, #eec5c5 2%, #b0efd8 100%);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgb(0 0 0 / 0.1);
    overflow: hidden;
    margin: 0 auto;
}
.dark-mode .products-item {
    width: 20%;
    box-sizing: border-box;
    padding: 15px;
    text-align: center;
    max-width: 920px;
    width: 100%;
    background: -webkit-linear-gradient(left, #651e8e 2%, #1bb472 100%);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgb(0 0 0 / 0.1);
    overflow: hidden;
    margin: 0 auto;
}
.products-item-image {
    overflow: hidden;
}
.products-item-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
}
@media (min-width: 768px) {
    .products-item {
        width: 100%;
    }
    .products-item-image {
        height: 500px;
    }
}
@media (min-width: 601px) and (max-width: 900px) {
    .products-item {
        width: 100%;
    }
    .products-item-image {
        height: 500px;
    }
}
@media (max-width: 600px) {
    .products-item {
        width: 100%;
    }
    .products-item-image {
        height: 78%;
    }
}
.about-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.side-text-c {
    line-height: 1.9;
}
.side-text {
    width: 550px;
    padding: 50px 40px;
    background: #baecd0;
    color: #0026ff;
    box-shadow: 2px 0 100px rgb(58 41 240 / 0.443);
    border-radius: 50px;
    text-align: justify;
    line-height: 22px;
    opacity: 0;
    transform: translateX(-100px);
    transition:
        opacity 1s ease,
        transform 1s ease;
    line-height: 1.3;
}
.light-mode .side-text {
    background: -webkit-linear-gradient(top, #f130ff 0, #f3d7d7 2%, #93f7d2 100%);
    color: #0202a3;
    line-height: 1.3;
}
.light-mode .side-text h2 {
    color: #002efc;
    text-align: center;
    margin-bottom: 5px;
    font-size: 22px;
}
.dark-mode .side-text {
    background: -webkit-linear-gradient(left, #651e8e 2%, #1bb472 100%);
    color: #bedde8f3;
    line-height: 1.3;
}
.dark-mode .side-text h2 {
    color: #f89e67f1;
    text-align: center;
    font-size: 22px;
    margin-bottom: 5px;
}
.light-mode .side-text:hover {
    background: -webkit-linear-gradient(bottom, #308aff 0, #eec5c5 2%, #b0efd8 100%);
    box-shadow: 0 8px 20px 0 rgb(0 0 0 / 0.2);
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.dark-mode .side-text:hover {
    background: linear-gradient(to left, #495766, #44435a);
    box-shadow: 0 8px 20px 0 rgb(0 0 0 / 0.2);
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.side-text p {
    padding: 10px 0;
    font-size: 20px;
}
.side-text p.lang-ur {
    direction: rtl;
    text-align: right;
    font-size: 24px;
    line-height: 1.7;
    justify-content: center;
    text-align: justify;
    font-family: "Noto Nastaliq Urdu", serif;
}
p.lang-ur {
    direction: rtl;
    text-align: right;
    font-size: 24px;
    line-height: 1.9;
    justify-content: center;
    text-align: justify;
    font-family: "Noto Nastaliq Urdu", serif;
}
@keyframes sideTextAnimation {
    0% {
        opacity: 0;
        transform: translateX(-100px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
.side-text {
    animation: sideTextAnimation 1s forwards;
}
@media (max-width: 600px) {
    .about-content {
        flex-direction: row-reverse;
        align-items: center;
    }
    .side-text {
        width: 90%;
        padding: 30px 20px;
        line-height: 1.3;
    }
}
.side-text-a {
    width: 1240px;
    padding: 50px 40px;
    background: #baecd0;
    color: #0026ff;
    box-shadow: 2px 0 100px rgb(58 41 240 / 0.443);
    border-radius: 50px;
    text-align: justify;
    line-height: 22px;
    opacity: 0;
    transform: translateX(-100px);
    transition:
        opacity 1s ease,
        transform 1s ease;
    margin-left: 8px;
    line-height: 1.3;
}
.light-mode .side-text-a {
    background: -webkit-linear-gradient(bottom, #308aff 0, #f3d7d7 2%, #93f7d2 100%);
    color: #430707;
    line-height: 1.3;
}
.light-mode .side-text-a h2 {
    color: #002efc;
    text-align: center;
}
.dark-mode .side-text-a {
    background: -webkit-linear-gradient(left, #651e8e 2%, #1bb472 100%);
    color: #bedde8f3;
    line-height: 1.3;
}
.dark-mode .side-text-a h2 {
    color: #f89e67f1;
    text-align: center;
}
.light-mode .side-text-a:hover {
    background: -webkit-linear-gradient(top, #308aff 0, #f9e7e7 2%, #cdf3e5 100%);
    box-shadow: 0 8px 20px 0 rgb(0 0 0 / 0.2);
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.dark-mode .side-text-a:hover {
    background: linear-gradient(to left, #1d252e, #44435a);
    box-shadow: 0 8px 20px 0 rgb(0 0 0 / 0.2);
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.side-text-a p {
    padding: 10px 0;
}
@keyframes sideTextAnimation {
    0% {
        opacity: 0;
        transform: translateX(-100px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
.side-text-a {
    animation: sideTextAnimation 1s forwards;
}
@media (max-width: 600px) {
    .about-content {
        flex-direction: row-reverse;
        align-items: center;
    }
    .side-text-a {
        width: 90%;
        padding: 30px 20px;
    }
    .side-text-a {
        width: 465px;
        text-align: justify;
        text-justify: inter-word;
        margin-left: 10px;
        line-height: 1.3;
    }
}
@media (max-width: 477px) {
    .about-content {
        flex-direction: row-reverse;
        align-items: center;
    }
    .service-item p {
        color: #05564e;
        text-align: justify;
        font-size: 16px;
    }
    .side-text-a {
        width: 90%;
        padding: 30px 20px;
    }
    .side-text-a {
        width: 340px;
        text-align: left;
        margin-left: 10px;
    }
    .side-text {
        width: 550px;
        padding: 50px 40px;
        background: #baecd0;
        color: #0026ff;
        box-shadow: 2px 0 100px rgb(58 41 240 / 0.443);
        border-radius: 50px;
        text-align: justify;
        line-height: 22px;
        opacity: 0;
        transform: translateX(-100px);
        transition:
            opacity 1s ease,
            transform 1s ease;
    }
    .light-mode .side-text {
        background: -webkit-linear-gradient(top, #308aff 0, #f3d7d7 2%, #93f7d2 100%);
        color: #0202a3;
    }
    .light-mode .side-text h2 {
        color: #002efc;
        text-align: center;
        font-size: 19px;
    }
    .light-mode .side-text-a h2 {
        color: #002efc;
        text-align: center;
        font-size: 25px;
    }
    .dark-mode .side-text {
        background: -webkit-linear-gradient(top, #308aff 0, #721297 2%, #0b8458 100%);
        color: #bedde8f3;
    }
    .dark-mode .side-text h2 {
        color: #04fce3f1;
        text-align: center;
        font-size: 19px;
    }
    .dark-mode .side-text-a h2 {
        color: #04fce3f1;
        text-align: center;
        font-size: 25px;
    }
    .light-mode .side-text:hover {
        background: -webkit-linear-gradient(bottom, #308aff 0, #eec5c5 2%, #b0efd8 100%);
        box-shadow: 0 8px 20px 0 rgb(0 0 0 / 0.2);
        -webkit-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }
    .dark-mode .side-text:hover {
        background: linear-gradient(to left, #1d252e, #44435a);
        box-shadow: 0 8px 20px 0 rgb(0 0 0 / 0.2);
        -webkit-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }
    .side-text p {
        padding: 10px 0;
        font-size: 14px;
    }
    .side-text-a p.lang-ur {
        direction: rtl;
        text-align: right;
        font-size: 22px;
        line-height: 1.2;
        justify-content: center;
        text-align: justify;
    }
}
.side-text-b {
    width: 100%;
    max-width: 1240px;
    padding: 50px 40px;
    background: #baecd0;
    color: #0026ff;
    box-shadow: 2px 0 100px rgb(58 41 240 / 0.443);
    border-radius: 50px;
    text-align: justify;
    line-height: 22px;
    opacity: 0;
    transform: translateX(-100px);
    transition:
        opacity 1s ease,
        transform 1s ease;
    margin: 0 auto 20px auto;
    animation: sideTextAnimation 1s forwards;
}
.light-mode .side-text-b {
    background: linear-gradient(to bottom, #308aff 0, #f3d7d7 2%, #93f7d2 100%);
    color: #430707;
}
.light-mode .side-text-b h2 {
    color: #002efc;
    text-align: center;
    font-size: 25px;
}
.dark-mode .side-text-b {
    background: linear-gradient(to bottom, #651e8e 2%, #217f56 100%);
    color: #bedde8f3;
}
.dark-mode .side-text-b h2 {
    color: #f89e67f1;
    text-align: center;
    font-size: 25px;
}
.light-mode .side-text-b:hover {
    background: linear-gradient(to bottom, #308aff 0, #eec5c5 2%, #b0efd8 100%);
    box-shadow: 0 8px 20px 0 rgb(0 0 0 / 0.2);
    transition: all 0.5s ease;
}
.dark-mode .side-text-b:hover {
    background: linear-gradient(to left, #1d252e, #44435a);
    box-shadow: 0 8px 20px 0 rgb(0 0 0 / 0.2);
    transition: all 0.5s ease;
}
.side-text-b p {
    padding: 10px 0;
    font-size: 17px;
}
.side-text-b p.lang-ur {
    direction: rtl;
    text-align: justify;
    font-size: 22px;
    line-height: 1.5;
}
@keyframes sideTextAnimation {
    0% {
        opacity: 0;
        transform: translateX(-100px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
@media (min-width: 810px) and (max-width: 1300px) {
    .side-text-b {
        padding: 40px 30px;
        max-width: 70%;
        font-size: 15px;
        line-height: 1.5;
    }
    .side-text-b h2 {
        font-size: 22px;
    }
    .side-text-b p {
        padding: 10px 0;
        font-size: 20px;
        line-height: 1.5;
    }
    .side-text-b p.lang-ur {
        font-size: 20px;
        line-height: 1.9;
    }
}
@media (max-width: 809px) {
    .side-text-b {
        padding: 30px 20px;
        font-size: 14px;
        line-height: 1.9;
    }
    .side-text-b h2 {
        font-size: 20px;
    }
    .side-text-b p {
        padding: 10px 0;
        font-size: 18px;
        line-height: 1.9;
    }
    .side-text-b p.lang-ur {
        font-size: 20px;
        line-height: 1.9;
    }
}
@media (max-width: 477px) {
    .side-text-b {
        padding: 20px 15px;
        font-size: 13px;
        border-radius: 20px;
        line-height: 1.9;
    }
    .side-text-b h2 {
        font-size: 18px;
    }
    .side-text-b p.lang-ur {
        font-size: 18px;
        line-height: 1.9;
    }
    .side-text-b p {
        padding: 10px 0;
        font-size: 16px;
        line-height: 1.9;
    }
    .dark-mode .link-clean {
        color: #09ff00;
        font-weight: 700;
        font-size: 16px;
    }
    .light-mode .link-clean {
        color: #781094;
        font-weight: 700;
        font-size: 16px;
    }
}
.dark-mode .link-clean {
    color: #09ff00;
    font-weight: 700;
}
.light-mode .link-clean {
    color: #781094;
    font-weight: 700;
}
.link-clean:hover {
    text-decoration: underline;
}
.side-text-d {
    width: 100%;
    max-width: 1240px;
    padding: 50px 40px;
    background: #baecd0;
    color: #0026ff;
    box-shadow: 2px 0 100px rgb(58 41 240 / 0.443);
    border-radius: 50px;
    text-align: justify;
    line-height: 22px;
    opacity: 0;
    transform: translateX(-100px);
    transition:
        opacity 1s ease,
        transform 1s ease;
    margin: 0 auto 20px auto;
    animation: sideTextAnimation 1s forwards;
}
.light-mode .side-text-d {
    background: linear-gradient(to bottom, #308aff 0, #f3d7d7 2%, #93f7d2 100%);
    color: #430707;
}
.light-mode .side-text-d h2 {
    color: #002efc;
    text-align: center;
    font-size: 25px;
}
.dark-mode .side-text-d {
    background: linear-gradient(to bottom, #651e8e 2%, #217f56 100%);
    color: #bedde8f3;
}
.dark-mode .side-text-d h2 {
    color: #f89e67f1;
    text-align: center;
    font-size: 25px;
}
.light-mode .side-text-d:hover {
    background: linear-gradient(to bottom, #308aff 0, #eec5c5 2%, #b0efd8 100%);
    box-shadow: 0 8px 20px 0 rgb(0 0 0 / 0.2);
    transition: all 0.5s ease;
}
.dark-mode .side-text-d:hover {
    background: linear-gradient(to left, #1d252e, #44435a);
    box-shadow: 0 8px 20px 0 rgb(0 0 0 / 0.2);
    transition: all 0.5s ease;
}
.side-text-d p {
    padding: 10px 0;
    font-size: 17px;
}
.side-text-d p.lang-ur {
    direction: rtl;
    text-align: justify;
    font-size: 22px;
    line-height: 1.5;
}
@keyframes sideTextAnimation {
    0% {
        opacity: 0;
        transform: translateX(-100px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
@media (min-width: 810px) and (max-width: 1300px) {
    .side-text-d {
        padding: 40px 30px;
        max-width: 70%;
        font-size: 15px;
        line-height: 0.5;
    }
    .side-text-d h2 {
        font-size: 22px;
    }
    .side-text-d p {
        padding: 10px 0;
        font-size: 20px;
        line-height: 1.5;
    }
    .side-text-d p.lang-ur {
        font-size: 20px;
        line-height: 1.9;
    }
}
@media (max-width: 809px) {
    .side-text-d {
        padding: 30px 20px;
        font-size: 14px;
        line-height: 0.5;
    }
    .side-text-d h2 {
        font-size: 20px;
    }
    .side-text-d p {
        padding: 10px 0;
        font-size: 18px;
        line-height: 1.9;
    }
    .side-text-d p.lang-ur {
        font-size: 20px;
        line-height: 1.9;
    }
}
@media (max-width: 477px) {
    .side-text-d {
        padding: 20px 15px;
        font-size: 13px;
        border-radius: 20px;
        line-height: 0.5;
    }
    .side-text-d h2 {
        font-size: 18px;
    }
    .side-text-d p.lang-ur {
        font-size: 18px;
        line-height: 1.9;
    }
    .side-text-d p {
        padding: 10px 0;
        font-size: 16px;
        line-height: 1.9;
    }
}
.uparrow a {
    position: fixed;
    right: 18px;
    bottom: 5px;
    background-color: #7840bd;
    padding: 9px;
    border-radius: 50%;
    color: #fff;
    display: none;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    z-index: 1000;
}
.uparrow a.show {
    display: block;
    opacity: 1;
}
.uparrow a:hover {
    cursor: pointer;
    background: linear-gradient(to left, #25a93f, #5e24bc);
}
.uparrow a:active {
    background: linear-gradient(to left, #7f0a97, #010029);
}
@media (min-width: 989px) and (max-width: 1300px) {
    .uparrow a.show {
        background: linear-gradient(to left, #25a93f, #5e24bc);
    }
    .uparrow a:active {
        background: linear-gradient(to left, #7f0a97, #010029);
    }
}
.extra {
    width: 100%;
    padding: 30px;
    padding-bottom: 10px;
    font-size: 50px;
    text-align: center;
    color: #00eaff;
    font-family: cursive;
    z-index: -9;
}
.extra-a {
    width: 100%;
    padding: 30px;
    padding-bottom: 10px;
    font-size: 50px;
    text-align: center;
    color: #00eaff;
    font-family: cursive;
    z-index: -9;
}
.extra-a p {
    padding: 30px;
    padding-bottom: 150px;
    font-size: 30px;
    text-align: center;
    color: #9b5346;
    background: -webkit-linear-gradient(left, #c6b4d3 2%, #cfeeca 100%);
    border-radius: 50px;
}
.dark-mode .extra-a p {
    color: #00fff7;
    background: -webkit-linear-gradient(left, #155799 2%, #159957 100%);
}
.extra p {
    padding: 30px;
    padding-bottom: 150px;
    font-size: 50px;
    text-align: center;
    color: #9b5346;
    background: -webkit-linear-gradient(left, #c6b4d3 2%, #cfeeca 100%);
    border-radius: 50px;
}
.dark-mode .extra p {
    color: #00fff7;
    background: -webkit-linear-gradient(left, #155799 2%, #159957 100%);
}
.center-text {
    text-align: center;
    text-decoration: solid;
    font-weight: 400;
}
.smbox {
    display: flex;
    flex-wrap: wrap;
    transform: translateY(-100px);
    justify-content: center;
}
.smbox span {
    margin: 1%;
    background: linear-gradient(to right, #eec5c5 2%, #b0efd8 100%);
    box-shadow:
        inset 0 0 25px rgb(0 0 0 / 0.2),
        0 0 40px rgb(0 0 0 / 0.3);
    border-radius: 10px;
    padding: 30px 50px;
    cursor: pointer;
}
.dark-mode .smbox span {
    background: -webkit-linear-gradient(left, #155799 2%, #159957 100%);
}
.smbox span:hover {
    transform: scale(1.3);
    transition: 0.5s ease;
}
.smbox .data {
    font-size: 80px;
    color: #fa6146;
    margin-inline-start: 0;
}
.dark-mode .smbox .data {
    font-size: 80px;
    color: #dec7c3;
    margin-inline-start: 0;
}
.smbox .det {
    font-size: 20px;
    color: #272529;
    font-family: cursive;
}
.dark-mode .smbox .det {
    font-size: 20px;
    color: #ece6f2;
    font-family: cursive;
}
@media (max-width: 601px) {
    .extra {
        background-size: cover;
        background-position: center;
    }
    .extra-a {
        background-size: cover;
        background-position: center;
    }
}
@media (max-width: 477px) {
    .extra {
        background-size: cover;
        background-position: center;
    }
    .extra-a {
        background-size: cover;
        background-position: center;
    }
}
.title {
    margin-top: 0;
    font-family: "Open Sans", sans-serif;
    font-size: 30px;
    text-align: center;
    color: #2e3d49;
}
.cbox {
    position: relative;
    width: 100%;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
}
.cbox .det {
    width: 250px;
    height: 80px;
    margin: 10px;
    background: #fff;
    cursor: pointer;
}
.cbox .det a {
    justify-content: space-around;
    width: 250px;
    padding: 28px;
    border-radius: 10px;
    border: 1px solid #fa4b37;
    font-size: 15px;
    color: #272529;
    font-family: cursive;
    text-decoration: none;
}
.cbox .det a:hover {
    background: linear-gradient(to right, #fa4b37, #df2771);
    color: #fff;
}
.cbox .det a:hover img {
    filter: brightness(100);
}
.cbox img {
    width: 20px;
    margin-right: 20px;
}
.totalcard {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
}
.totalcard .card {
    margin: 50px;
    width: 300px;
    border-radius: 10px;
    background: #fff;
}
.light-mode .totalcard .card {
    background: linear-gradient(to right, #c2e9e1, #fdfefe, #c2e9e1 6%, #eec5c5 2%, #b0efd8 100%);
}
.dark-mode .totalcard .card {
    background: linear-gradient(to right, #c2e9e1, #fdfefe, #c2e9e1, #97bc9b 6%, #308aff 0, #4173ad 0, #159957);
}
.card-title {
    margin-left: 70px;
}
.totalcard .card {
    box-shadow:
        inset 0 0 10px rgb(0 0 0 / 0.4),
        0 0 10px rgb(0 0 0 / 0.3);
}
.card:nth-child(1) {
    border-top: 5px solid #06c206;
}
.card:nth-child(2) {
    border-top: 5px solid blue;
}
.card:nth-child(3) {
    border-top: 5px solid #c456fb;
}
.card:nth-child(4) {
    border-top: 5px solid #00a58f;
}
.card:nth-child(1):hover {
    box-shadow:
        inset 0 0 10px rgb(0 255 0 / 0.5),
        1px 1px 30px rgb(0 255 0 / 0.5);
}
.card:nth-child(2):hover {
    box-shadow:
        inset 0 0 10px rgb(0 81 255 / 0.6),
        1px 1px 30px rgb(0 81 255 / 0.6);
}
.card:nth-child(3):hover {
    box-shadow:
        inset 0 0 10px rgb(195 0 255 / 0.5),
        1px 1px 30px rgb(195 0 255 / 0.5);
}
.card:nth-child(4):hover {
    box-shadow:
        inset 0 0 10px rgb(0 145 92 / 0.699),
        1px 1px 30px rgb(0 145 92 / 0.699);
}
.totalcard .card img {
    transition-duration: 0.8s;
    width: 150px;
    height: 150px;
    margin-top: 20px;
    margin-left: 100px;
    cursor: pointer;
    border-radius: 50%;
    align-items: center;
    margin-left: 80px;
    transition:
        transform 0.5s ease,
        border-radius 0.5s ease,
        box-shadow 0.5s ease;
    box-shadow: 0 4px 10px rgb(152 82 82 / 0.2);
}
.totalcard .card:hover {
    transform: scale(1.3);
    transition: 0.5s ease;
}
#detail p {
    font-size: 17px;
    padding: 20px;
    font-weight: 700;
    margin-top: -25px;
    text-align: center;
    color: #c8eacc;
    line-height: 1;
    transition: color 0.3s ease;
    margin-left: 35;
    margin-right: -12px;
    font-size: 20px;
    font-weight: 700;
    transition: color 0.3s ease;
}
.light-mode #detail p {
    color: #ed2690;
}
#detail button {
    outline: 0;
    border-radius: 10px;
    border-style: none;
    border: 1px solid #000;
    padding: 9px 25px;
    cursor: pointer;
    transition-duration: 0.4s;
}
#detail a {
    bottom: 80px;
    text-decoration: none;
    margin-bottom: 30px;
    margin-top: 20px;
    margin-left: 90px;
    align-self: center;
}
.btn-roshan:hover {
    background: rgb(0 255 0 / 0.7);
    color: #fff;
}
.btn-roshan2:hover {
    background: rgb(0 0 255 / 0.5);
    color: #fff;
}
.card-title {
    font-size: 17px;
    color: #c1d7ec;
    padding: 20px;
    font-weight: 700;
    margin-left: 35px;
    font-size: 23px;
    font-weight: 700;
    transition: color 0.3s ease;
}
.light-mode .card-title {
    color: #08b149;
}
.dark-mode .card-title {
    color: #5cfe9a;
}
.card-title:hover {
    color: #bff745;
}
.light-mode .card-title:hover {
    color: #c10808;
}
#detail p:hover {
    color: #7e610a;
}
.dark-mode #detail p:hover {
    color: #92fa89;
}
.card-title-a {
    font-size: 17px;
    color: #c1d7ec;
    padding: 20px;
    font-weight: 700;
    margin-left: 45px;
    font-size: 23px;
    font-weight: 700;
    transition: color 0.3s ease;
}
.light-mode .card-title-a {
    color: #0b4ce1;
}
.dark-mode .card-title-a {
    color: #e6eb7b;
}
.card-title-a:hover {
    color: #bf6d09;
}
.dark-mode .card-title-a:hover {
    color: #85ebf9;
}
.card-title-b {
    font-size: 17px;
    color: #c1d7ec;
    padding: 20px;
    font-weight: 700;
    margin-left: 55px;
    font-size: 23px;
    font-weight: 700;
    transition: color 0.3s ease;
}
.light-mode .card-title-b {
    color: #0081a5;
}
.dark-mode .card-title-b {
    color: #87ffdb;
}
.card-title-b:hover {
    color: #bf6d09;
}
.dark-mode .card-title-b:hover {
    color: #f9b385;
}
.card-title-c {
    font-size: 17px;
    color: #c1d7ec;
    padding: 20px;
    font-weight: 700;
    margin-left: 45px;
    font-size: 23px;
    font-weight: 700;
    transition: color 0.3s ease;
}
.light-mode .card-title-c {
    color: #00a58f;
}
.dark-mode .card-title-c {
    color: #87d5ff;
}
.card-title-c:hover {
    color: #bf6d09;
}
.dark-mode .card-title-c:hover {
    color: #f9b385;
}
@media (max-width: 477px) {
    .totalcard .card {
        margin: 30px;
        width: 300px;
        border-radius: 10px;
        background: #fff;
    }
    .card-title {
        font-size: 17px;
        color: #c1d7ec;
        padding: 20px;
        font-weight: 700;
        margin-left: 20px;
        font-size: 23px;
        font-weight: 700;
        transition: color 0.3s ease;
    }
    .card-title-a {
        font-size: 17px;
        color: #c1d7ec;
        padding: 20px;
        font-weight: 700;
        margin-left: 35px;
        font-size: 23px;
        font-weight: 700;
        transition: color 0.3s ease;
    }
    .card-title-b {
        font-size: 17px;
        color: #c1d7ec;
        padding: 20px;
        font-weight: 700;
        margin-left: 45px;
        font-size: 23px;
        font-weight: 700;
        transition: color 0.3s ease;
    }
    .card-title-c {
        font-size: 17px;
        color: #c1d7ec;
        padding: 20px;
        font-weight: 700;
        margin-left: 35px;
        font-size: 23px;
        font-weight: 700;
        transition: color 0.3s ease;
    }
    .totalcard .card:hover {
        transform: scale(1.1);
        transition: 0.5s ease;
    }
}
.service-swipe {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: right;
    background-size: cover;
    background-attachment: fixed;
}
.service-heading {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    padding: 20px;
}
.center-text {
    font-size: 50px;
    color: var(--text-color);
    text-transform: capitalize;
    transition: color 0.3s ease-in-out;
}
:root {
    --text-color: #0b0a0a;
}
.dark-mode {
    --text-color: #fff;
}
.service-swipe .s-card img {
    width: 100px;
}
.service-swipe a {
    padding: 0;
    margin: 40px 10px;
}
.service-swipe .s-card {
    display: flex;
    justify-content: space-around;
    padding: 10px;
    align-items: center;
    text-align: center;
    width: 340px;
    height: 200px;
    box-shadow:
        inset 0 0 20px rgb(255 255 255 / 0.05),
        0 0 50px rgb(0 0 0 / 0.8);
    border-radius: 5px;
    cursor: pointer;
    transition-duration: 0.5s;
    margin: 1%;
    background: linear-gradient(#9d1196, #c85f1d);
    box-shadow:
        inset 0 0 25px rgb(0 0 0 / 0.2),
        0 0 40px rgb(0 0 0 / 0.3);
    background: linear-gradient(to right, #207b6a 25%, #6334a0 100%);
    border-radius: 10px;
    padding: 30px 50px;
    cursor: pointer;
}
.light-mode .service-swipe .s-card {
    background: linear-gradient(
        to right,
        #c2e9e1,
        #97bc9b 5%,
        #25a93f,
        #5e24bc,
        #4d713e,
        #308aff 0,
        #eec5c5 2%,
        #b0efd8 100%
    );
}
.s-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 10px;
    width: 350px;
    height: 250px;
    box-shadow:
        inset 0 0 20px rgb(255 255 255 / 0.05),
        0 0 50px rgb(248 247 247 / 0.8);
    border-radius: 5px;
    cursor: pointer;
    transition: 0.5s;
}
.s-card img {
    width: 100px;
    margin-bottom: 10px;
}
.s-card p {
    color: #f2f2f2;
    font-size: 1.2em;
    font-family: "Noto Nastaliq Urdu", serif;
}
@media (max-width: 600px) {
    .service-heading {
        margin-top: 90px;
    }
    .service-swipe .s-card p {
        color: #f0da11;
        font-size: 1.1em;
        font-family: "Noto Nastaliq Urdu", serif;
        text-align: center;
    }
    .light-mode .service-swipe .s-card p {
        color: #9c01b4;
        font-family: "Noto Nastaliq Urdu", serif;
    }
    .service-swipe .s-card:hover {
        box-shadow: 0 0 50px rgb(21 214 117 / 0.8);
        transform: translateY(-10px);
    }
    .light-mode .service-swipe .s-card:hover {
        box-shadow: 0 0 50px rgb(223 170 170 / 0.8);
        transform: translateY(-10px);
    }
}
@media (min-width: 601px) and (max-width: 899px) {
    .service-heading {
        margin-top: 90px;
    }
    .service-swipe .s-card {
        margin-right: 5px;
        margin-left: 1px;
    }
    .service-swipe .s-card p {
        color: #f0da11;
        font-size: 1.1em;
        font-family: "Noto Nastaliq Urdu", serif;
        text-align: center;
    }
    .light-mode .service-swipe .s-card p {
        color: #9c01b4;
        font-family: "Noto Nastaliq Urdu", serif;
    }
    .service-swipe .s-card:hover {
        box-shadow: 0 0 50px rgb(21 214 117 / 0.8);
        transform: translateY(-10px);
    }
    .light-mode .service-swipe .s-card:hover {
        box-shadow: 0 0 50px rgb(223 170 170 / 0.8);
        transform: translateY(-10px);
    }
}
@media (min-width: 900px) {
    .service-swipe .s-card p {
        color: #f0da11;
        font-size: 1.1em;
        font-family: "Noto Nastaliq Urdu", serif;
        text-align: center;
    }
    .light-mode .service-swipe .s-card p {
        color: #9c01b4;
        font-family: "Noto Nastaliq Urdu", serif;
    }
    .service-swipe .s-card:hover {
        box-shadow: 0 0 50px rgb(21 214 117 / 0.8);
        transform: translateY(-10px);
    }
    .light-mode .service-swipe .s-card:hover {
        box-shadow: 0 0 50px rgb(223 170 170 / 0.8);
        transform: translateY(-10px);
    }
}
@media (max-width: 477px) {
    .service-heading {
        margin-top: 30px;
    }
    .service-swipe .s-card {
        margin-right: 5px;
        margin-left: 1px;
    }
    .service-swipe .s-card p {
        color: #f0da11;
        font-size: 1.2em;
        font-family: "Noto Nastaliq Urdu", serif;
        text-align: center;
    }
    .light-mode .service-swipe .s-card p {
        color: #9c01b4;
        font-family: "Noto Nastaliq Urdu", serif;
    }
    .service-swipe .s-card:hover {
        box-shadow: 0 0 50px rgb(21 214 117 / 0.8);
        transform: translateY(-10px);
    }
    .light-mode .service-swipe .s-card:hover {
        box-shadow: 0 0 50px rgb(223 170 170 / 0.8);
        transform: translateY(-10px);
    }
}
.marquee-container {
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    background: linear-gradient(45deg,#6170a3 20%,#569a04 100%);
    padding: 7px 0;
    font-size: 1.3em;
}

.marquee-content, .marquee-content-urdu {
    display: inline-block; /* keep layout intact */
    white-space: nowrap;
    transform: translate3d(0,0,0);
    will-change: transform;
    backface-visibility: hidden;
    text-rendering: optimizeLegibility;
}

.marquee-content span, .marquee-content-urdu span {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-shadow: none;
}


.light-mode .marquee-container {
    background:linear-gradient(to right,#eec5c5 2%,#b0efd8 100%);
    color:rgb(143, 61, 61);
}
.marquee-content {
    display: flex;
    gap:50px;
    width:max-content;
    animation:marquee 50s linear infinite;
}
.marquee-container:hover .marquee-content {
    animation-play-state:paused;
}
@keyframes marquee {
    from {
        transform: translate3d(calc(100vw + 1px), 0, 0);
    }
    to {
        transform: translate3d(-100%, 0, 0);
    }
}

@media (min-width:900px) {
   .marquee-content { animation-duration: 50s linear infinite; }
}
@media (max-width:600px) {
    .marquee-content { animation-duration: 50s linear infinite; }
}
@media (min-width:601px) and (max-width:899px) {
    .marquee-content { animation-duration: 50s linear infinite; }
}
@media (max-width:477px) {
   .marquee-content { animation-duration: 50s linear infinite; }
}
.marquee-container-urdu {
    overflow:hidden;
    white-space:nowrap;
    width:100%;
    background:linear-gradient(45deg,#4d5c8a 20%,#4b8503 100%);
    padding:0;
    color:rgb(248,245,245);
    font-family:'Noto Nastaliq Urdu',serif;
    font-size:1.2em;
    direction:rtl;
    text-align:right;
    
}
.light-mode .marquee-container-urdu {
    background:linear-gradient(to right,#eec5c5 2%,#b0efd8 100%);
    color:rgb(175,24,24);
}
.marquee-content-urdu {
    display:flex;
    gap:50px;
    width:max-content;
    animation:marquee-urdu 50s linear infinite;
}
.marquee-container-urdu:hover .marquee-content-urdu {
    animation-play-state:paused;
}
@keyframes marquee-urdu {
    from {
        transform: translate3d(calc(-100vw - 1px), 0, 0);
    }
    to {
        transform: translate3d(100%, 0, 0);
    }
}

@media (min-width:900px) {
   .marquee-content { animation-duration: 50s linear infinite; }
}
@media (max-width:600px) {
   .marquee-content { animation-duration: 50s linear infinite; }
}
@media (min-width:601px) and (max-width:899px) {
    .marquee-content { animation-duration: 50s linear infinite; }
}
@media (max-width:477px) {
    .marquee-content { animation-duration: 50s linear infinite; }
}
.diffSection {
    position: relative;
    min-height: 0;
}
.wrapper-a {
    text-align: center;
}
.section-title {
    display: inline-block;
    margin: 0 auto 20px;
    text-align: center;
    margin-bottom: 20px;
}
.section-title h3 {
    margin: 0;
    display: inline-block;
    font-size: 26px;
}
.csec-a {
    background: linear-gradient(to right, #eec5c5 2%, #b0efd8 100%);
    background-attachment: fixed;
    position: absolute;
    width: 100%;
    margin-top: 1px;
    height: 700px;
    top: 100px;
    transform-origin: top right;
    transform: skewY(-10deg);
    z-index: 0;
}
.dark-mode .csec-a {
    background: linear-gradient(to right, #155799 2%, #159957 100%);
}
.dark-mode .container-v {
    background: linear-gradient(to bottom, #155799 2%, #18b47b 100%);
}
.light-mode .container-v {
    background: linear-gradient(to bottom, #eec5c5 2%, #b0efd8 100%);
}
.container-v {
    width: 100%;
    margin: auto;
    background: linear-gradient(to bottom, #155799 1%, #18b47b 100%);
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgb(186 70 70 / 0.1);
    margin-top: 10px;
}
@media (min-width: 601px) and (max-width: 920px) {
    .desktop-menu-category-list .menu-category > .menu-title {
        position: relative;
        color: var(--onyx);
        font-size: var(--fs-9);
        font-style: bold;
        font-weight: bolder;
        text-transform: uppercase;
        padding: 15px 0;
        transition: var(--transition-timing);
    }
}
@media (max-width: 600px) {
    .csec-a {
        height: 520px;
        margin-top: 90px;
    }
    .container-v {
        width: 450px;
        margin: auto;
        background: linear-gradient(to bottom, #155799 1%, #18b47b 100%);
        padding: 40px;
        border-radius: 12px;
        box-shadow: 0 10px 30px rgb(186 70 70 / 0.1);
        margin-top: 10px;
    }
}
@media (min-width: 601px) and (max-width: 989px) {
    .container-v {
        width: 450px;
        margin: auto;
        background: linear-gradient(to bottom, #155799 1%, #18b47b 100%);
        padding: 40px;
        border-radius: 12px;
        box-shadow: 0 10px 30px rgb(186 70 70 / 0.1);
        margin-top: 10px;
    }
}
@media (min-width: 989px) {
    .csec-a {
        height: 535px;
        margin-top: 0;
    }
    .container-v {
        width: 710px;
        margin: auto;
        background: linear-gradient(to bottom, #eec5c5 2%, #b0efd8 100%);
        padding: 40px;
        border-radius: 12px;
        box-shadow: 0 10px 30px rgb(0 0 0 / 0.1);
        margin-top: 30px;
    }
}
.contact-form-a {
    max-width: 600px;
    background: #bc4141;
    margin: 50px auto;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgb(199 84 84 / 0.1);
}
.contact-form-a h2 {
    text-align: center;
    margin-bottom: 25px;
    color: #e02e2e;
}
.form-group-a {
    margin-bottom: 20px;
    font-weight: 700;
}
.form-group-a .urdu {
    margin-bottom: 20px;
}
.form-group {
    margin-bottom: 2px;
    font-weight: 700;
}
.form-group .urdu {
    margin-bottom: 2px;
}
label-a {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
}
.imp-a {
    color: red;
}
input[type="text"],
input[type="email"],
textarea {
    width: 100%;
    padding: 12px 12px;
    border: 1px solid #cf0b0b;
    border-radius: 6px;
    font-size: 16px;
    transition: border-color 0.3s;
}
input:focus,
textarea:focus {
    border-color: #007bff;
    outline: 0;
    border: 2px solid #f72626;
    border-radius: 6px;
}
input::placeholder,
textarea::placeholder {
    line-height: normal;
}
.row-a {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    line-height: 1 !important;
}
.row-a .form-group-a {
    flex: 1;
    min-width: 100%;
    line-height: 1 !important;
}
.row {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
}
.row .form-group {
    flex: 1;
    min-width: 100%;
}
@media (min-width: 600px) {
    .row-a .form-group-a {
        min-width: 48%;
    }
}
button[type="submit"] {
    background-color: #318056;
    color: #fff;
    border: 0;
    padding: 8px 10px;
    font-size: 16px;
    border-radius: 6px;
    cursor: pointer;
    width: 100%;
    transition: background-color 0.3s;
    line-height: 2 !important;
}
button[type="submit"]:hover {
    background-color: #0056b3;
}
@media (max-width: 477px) {
    .csec-a {
        height: 410px;
        margin-top: 125px;
    }
    .container-v {
        width: 300px;
        margin: auto;
        background: linear-gradient(to bottom, #eec5c5 2%, #b0efd8 100%);
        padding: 25px;
        border-radius: 12px;
        box-shadow: 0 10px 30px rgb(0 0 0 / 0.1);
        margin-top: -13px;
    }
}
.dark-mode .field-error {
    color: #e8f83c;
    font-size: 0.9em;
    margin-top: 0;
    display: none;
}
.light-mode .field-error {
    color: #ea0909;
    font-size: 0.9em;
    margin-top: 0;
    display: none;
}
.success-message {
    color: green;
    background: #e6ffe6;
    padding: 10px;
    margin-top: 15px;
    border-radius: 5px;
    font-weight: 700;
    display: none;
}
.form-group,
.form-group-a {
    margin-bottom: 15px;
    line-height: 1 !important;
}
@media (max-width: 600px) {
    .form-group,
    .form-group-a {
        margin-bottom: 15px;
        line-height: 1 !important;
    }
    .form-group-a label {
        line-height: 1.6;
        display: block;
        margin-bottom: 5px;
    }
}
@media (min-width: 601px) and (max-width: 989px) {
    .form-group,
    .form-group-a {
        margin-bottom: 15px;
        line-height: 1 !important;
    }
    .form-group-a label {
        line-height: 1.6;
        display: block;
        margin-bottom: 5px;
    }
}
@media (max-width: 477px) {
    .form-group,
    .form-group-a {
        margin-bottom: 15px;
        line-height: 1 !important;
    }
    .form-group-a label {
        line-height: 1.6;
        display: block;
        margin-bottom: 8px;
    }
}
@media (min-width: 989px) {
    .form-group,
    .form-group-a {
        margin-bottom: 15px;
        line-height: 1 !important;
    }
    .form-group-a label {
        line-height: 1.6;
        display: block;
        margin-bottom: 5px;
    }
}
input,
textarea {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
}
#review_section p {
    font-size: 40px;
    padding: 100px 20px 40px;
    color: #2e3d49;
    text-align: center;
    font-family: "Segoe UI", sans-serif;
    margin-top: 20px;
}
.dark-mode #review_section p {
    color: #f9fcfe;
}
.rev-container {
    padding: 10px 10%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    box-shadow: 0 10px 25px #f30707;
    gap: 30px;
}
.rev-card:hover {
    transform: scale(1);
    box-shadow: 0 10px 25px #f96666;
}
.identity {
    width: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    text-align: center;
}
.identity img {
    width: 120px;
    height: 120px;
    transition-duration: 0.8s;
    border-radius: 50%;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}
.identity img:hover {
    transform: scale(1.15);
    box-shadow: 0 0 10px rgb(0 0 0 / 0.2);
}
.identity p {
    font-weight: 700;
    color: #2e3d49;
    margin-top: 8px;
}
.dark-mode .identity p {
    font-weight: 700;
    color: #f9f9fa;
    margin-top: 8px;
}
.identity h6 {
    color: #666;
    font-size: 0.85em;
    margin-top: 4px;
}
.rating {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    background: linear-gradient(to left, 100%);
}
.rating img {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}
.rating img:hover {
    transform: scale(1.3);
}
.rev-cont {
    flex: 1;
    padding: 1px;
    overflow: hidden;
}
.rev-cont #title {
    color: #2e3d49;
    font-weight: 700;
    margin-bottom: 0;
    align-items: center;
    text-align: center;
    background: linear-gradient(to bottom, #eec5c5 2%, #b0efd8 100%);
}
.rev-cont #content {
    color: #8123df;
    font-size: 0.95em;
    line-height: 1.6;
    text-align: center;
    font-weight: 700;
    font-family: "Segoe UI", sans-serif;
    background: linear-gradient(to bottom, #eec5c5 2%, #b0efd8 100%);
}
.rev-card {
    flex-direction: column;
    width: 100%;
}
.identity {
    width: 100%;
    margin-bottom: 10px;
}
.cards-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-left: -90px;
}
.card-container-a {
    width: 300px;
    height: 200px;
    perspective: 1000px;
    margin-left: 100px;
    margin-bottom: 50px;
}
.card-a {
    width: 100%;
    height: 100%;
    position: relative;
    transition: transform 0.8s;
    transform-style: preserve-3d;
    margin-bottom: 50px;
}
.card-container-a:hover .card-a {
    transform: rotateY(180deg);
}
.card-face-a {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    font-size: 20px;
    font-family: sans-serif;
    color: #f5f6f3;
}
.light-mode .card-front {
    background: linear-gradient(to bottom, #eec5c5 2%, #b0efd8 100%);
}
.light-mode .card-back {
    background: linear-gradient(to bottom, #eec5c5 2%, #b0efd8 100%);
    transform: rotateY(180deg);
}
.dark-mode .card-front {
    background: linear-gradient(to bottom, #18b47b 1%, #155799 100%);
}
.dark-mode .card-back {
    background: linear-gradient(to bottom, #155799 1%, #18b47b 100%);
    transform: rotateY(180deg);
}
@media (max-width: 600px) {
    .card-container-a {
        width: 400px;
        height: 200px;
        perspective: 1000px;
        margin-left: 100px;
    }
}
@media (max-width: 477px) {
    .card-container-a {
        width: 300px;
        height: 200px;
        perspective: 1000px;
        margin-left: 90px;
    }
}
#makeitfull {
    display: flex;
    justify-content: center;
    transform: translateY(35px);
}
#makeitfull img {
    width: 300px;
    margin-bottom: 35px;
    margin-top: -70px;
}
.ccardbox2 {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.dcard2 {
    margin: 20px;
    width: 370px;
    height: 220px;
    border-radius: 10px;
    background: linear-gradient(to bottom, #eec5c5 2%, #b0efd8 100%);
    box-shadow: 0 2px 10px rgb(0 0 0 / 0.1);
    overflow: hidden;
    margin: 0 auto;
    line-height: 1 !important;
}
.dark-mode .dcard2 {
    background: -webkit-linear-gradient(left, #155799 2%, #159957 100%);
    line-height: 1 !important;
}
.fpart2 img {
    display: none;
}
.dcard2 .fpart2 {
    width: 370px;
    height: 208px;
    color: #ff4e4e;
    text-align: left;
    border-top-right-radius: 100px;
    transform: translateY(-19px);
    box-shadow: 0 0 20px rgb(0 0 0 / 0.4);
    overflow: hidden;
}
.dcard2 .tag {
    position: relative;
    margin-left: 346px;
    top: 10px;
    color: #0e02fe;
    font-weight: 700;
}
.dark-mode .dcard2 .tag {
    color: #02feb7;
}
.dcard2 .fpart2 img {
    width: 100%;
    height: 100%;
}
.fpart2 iframe {
    height: inherit;
    width: inherit;
}
.click-me {
    justify-content: center;
    display: flex;
    margin-bottom: 20px;
}
.click-me a {
    color: #f5008f;
    text-decoration: none;
    transition-duration: 0.5s;
    padding: 10px;
    background: linear-gradient(to bottom, #b0efd8 100%);
    border-radius: 50px;
    margin-top: 20px;
}
.dark-mode .click-me a {
    color: #fff;
    background: -webkit-linear-gradient(left, #155799 2%, #159957 100%);
}
.light-mode .click-me a {
    color: #f8043d;
    background: linear-gradient(to bottom, #a1b7cd 2%, #b3dfc9 100%);
}
.click-me a:hover {
    background: #f0d0ed;
    color: #0c2ea5;
}
.dark-mode .click-me a:hover {
    background: #4964c2;
    color: #08f7f7;
}
.jelly-wrapper {
    overflow: hidden;
    display: center;
}
@media (max-width: 600px) {
    .dcard2 {
        margin-bottom: 20px;
        line-height: 1 !important;
    }
}
@media (min-width: 601px) and (max-width: 1200px) {
    .dcard2 {
        margin-bottom: 20px;
        line-height: 1 !important;
    }
}
@media (max-width: 477px) {
    .dcard2 {
        margin-bottom: 40px;
        line-height: 1 !important;
    }
}
.light-mode .footer-container {
    background: linear-gradient(to right, #eec5c5 2%, #b0efd8 100%);
    padding: 40px 10px;
    color: #ddd;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-family: "Noto Nastaliq Urdu", serif;
    line-height: 1.8 !important;
}
.dark-mode .footer-container {
    background: linear-gradient(to bottom, #159957 2%, #155799 100%);
    padding: 40px 10px;
    color: #ddd;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-family: "Noto Nastaliq Urdu", serif;
    line-height: 1.8 !important;
}
.footer-logo-part {
    text-align: center;
    padding: 800px 10;
    color: #f01e1e;
    font-size: 21px;
    font-weight: 700;
    margin-bottom: -20px;
}
.footer-logo-part-a {
    text-align: center;
    padding: 800px 10;
    color: #f01e1e;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: -20px;
}
.footer-logo-part-b {
    text-align: center;
    padding: 800px 10;
    color: #f01e1e;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: -20px;
}
.dark-mode .footer-logo-part {
    color: #f4e6e6;
}
.dark-mode .footer-logo-part-a {
    color: #f4e6e6;
}
.dark-mode .footer-logo-part-b {
    color: #f4e6e6;
}
@media (min-width: 787px) and (max-width: 989px) {
    .footer-logo-part {
        margin-bottom: 50px;
        font-size: 20px;
    }
    .footer-logo-part-a {
        margin-bottom: 50px;
        font-size: 20px;
    }
    .footer-logo-part-b {
        margin-bottom: 50px;
        font-size: 20px;
    }
}
@media (min-width: 477px) and (max-width: 786px) {
    .footer-logo-part {
        margin-bottom: 50px;
        font-size: 20px;
    }
    .footer-logo-part-a {
        margin-bottom: 50px;
        font-size: 22px;
    }
    .footer-logo-part-b {
        margin-bottom: 50px;
        font-size: 22px;
    }
}
@media (max-width: 477px) {
    .footer-logo-part {
        margin-bottom: 50px;
        font-size: 16px;
    }
    .footer-logo-part-a {
        margin-bottom: 45px;
        font-size: 12px;
    }
    .footer-logo-part-b {
        margin-bottom: 50px;
        font-size: 17px;
    }
}
.footer-header h2 {
    color: #fff;
    font-size: 20px;
    margin-bottom: 1px;
    border-bottom: 1px solid #555;
    padding-bottom: 5px;
}
.footer-btn {
    margin: 5px;
    padding: 10px 10px;
    background: linear-gradient(to right, #155799 2%, #159957 100%);
    color: #fff;
    border: 0;
    border-radius: 5px;
    transition: background 0.3s;
}
.light-mode .footer-btn {
    background: linear-gradient(to right, #eec5c5 2%, #b0efd8 100%);
    color: #3b1951;
}
.footer-btn:hover {
    background: #666;
    color: #f3f0f5;
}
footer .right-col h1 {
    font-size: 24px;
    color: #eee;
}
.footer-header {
    margin-top: 10px;
}
.footer-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    text-align: left;
    margin-top: 10px;
}
.footer-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
    font-size: 18px;
}
.footer-icon {
    width: 30px;
    height: 30px;
    vertical-align: middle;
}
.material-btn {
    width: auto;
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    font-size: 1rem;
    line-height: 14px;
    overflow: hidden;
    outline: 0;
    box-shadow:
        0 3px 1px -2px rgb(0 0 0 / 0.2),
        0 2px 2px 0 rgb(0 0 0 / 0.14),
        0 1px 5px 0 rgb(0 0 0 / 0.12);
    cursor: pointer;
    padding: 16px 32px;
    min-width: 64px;
    vertical-align: middle;
    text-align: center;
    text-overflow: ellipsis;
    height: auto;
    transition: all 0.5s;
    z-index: 1;
    border-radius: 4px;
}
.mini-btn {
    padding: 5px 10px;
}
.sm-btn {
    padding: 10px 20px;
}
.md-btn {
    padding: 16px 32px;
}
.lg-btn {
    padding: 25px 50px;
}
.tada-btn {
    animation: animtada 2s infinite ease;
}
.pulse-btn {
    animation: shadowPulse 2s infinite ease;
}
.jelly-btn:hover {
    animation: jelly 0.75s linear alternate;
}
.heavy-pulse-btn {
    animation: shadowPulseHeavy 2s infinite ease;
}
.rainbow-btn {
    color: #fff;
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 400px;
}
.rainbow-btn:hover {
    animation: animateRainbowBtn 5s linear infinite;
}
.material-btn i,
.btn i {
    padding-right: 9px;
    line-height: 2px;
    text-align: center;
}
.non-text-btn i {
    padding: 0;
    margin: 0;
    line-height: 2px;
    text-align: center;
}
.material-btn .rtl-btn-icon,
.btn .rtl-btn-icon {
    padding-left: 9px;
    line-height: 2px;
}
@keyframes shadowPulse {
    from {
        -webkit-box-shadow: 0 0 0 0 rgb(255 255 255 / 0.05);
        box-shadow: 0 0 0 0 rgb(255 255 255 / 0.05);
    }
    to {
        -webkit-box-shadow: 0 0 0 30px #fff0;
        box-shadow: 0 0 0 30px #fff0;
    }
}
@keyframes animateRainbowBtn {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 400%;
    }
}
@keyframes shadowPulseHeavy {
    from {
        -webkit-box-shadow: 0 0 0 0 rgb(255 255 255 / 0.05);
        box-shadow: 0 0 0 0 rgb(255 255 255 / 0.05);
    }
    to {
        -webkit-box-shadow: 0 0 0 100px #fff0;
        box-shadow: 0 0 0 100px #fff0;
    }
}
@keyframes animtada {
    0% {
        transform: scale(1);
    }
    4.34783% {
        transform: scale(0.9) rotate(-4deg);
    }
    8.69565% {
        transform: scale(0.9) rotate(-4deg);
    }
    13.04348% {
        transform: scale(1) rotate(4deg);
    }
    17.3913% {
        transform: scale(1) rotate(-4deg);
    }
    21.73913% {
        transform: scale(1) rotate(4deg);
    }
    26.08696% {
        transform: scale(1) rotate(-4deg);
    }
    30.43478% {
        transform: scale(1) rotate(4deg);
    }
    34.78261% {
        transform: scale(1) rotate(0);
    }
    100% {
        transform: scale(1) rotate(0);
    }
}
@keyframes jelly {
    25% {
        transform: scale(0.9, 1.1);
    }
    50% {
        transform: scale(1.1, 0.9);
    }
    75% {
        transform: scale(0.95, 1.05);
    }
}
.material-btn::-moz-focus-inner {
    border: 0;
}
.dark-mode .primary-btn {
    border: 0;
    border-radius: 4px;
    color: #ffffff !important;
    background: linear-gradient(to right, #159957, #155799);
}
.light-mode .primary-btn {
    background: linear-gradient(to right, #83d2b5 2%, #da8d8d 100%);
}
.dark-mode .secondary-btn {
    border: 0;
    border-radius: 4px;
    color: #ffffff !important;
    background: linear-gradient(to right, #155799, #030236);
}
.light-mode .secondary-btn {
    background: linear-gradient(to right, #83d2b5 2%, #da8d8d 100%);
}
.rounded-btn {
    border-radius: 50px !important;
}
.right-side {
    padding: 2rem;
    display: flex;
    justify-content: center;
    align-items: start;
    min-height: 100vh;
}
.quiz-wrapper {
    width: 100%;
    max-width: 900px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgb(0 0 0 / 0.1);
    overflow: hidden;
    animation: fadeIn 0.8s ease-in-out;
}
.quiz-frame {
    width: 100%;
    height: 800px;
    border: 0;
    transition: transform 0.3s ease;
}
.quiz-frame:hover {
    transform: scale(1.005);
}
.placeholder {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f9fafb;
    color: #0f4ecb;
    height: 200px;
    font-size: 1.2rem;
    border-bottom: 1px solid #e5e7eb;
}
.iframe-wrapper {
    padding: 1rem;
}
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@media (min-width: 768px) {
    .quiz-frame {
        height: 600px;
    }
    .right-side {
        padding: 1rem;
    }
}
@media (max-width: 477px) {
    .quiz-frame {
        height: 410px;
    }
    .right-side {
        padding: 0rem;
    }
}
@media (max-width: 477px) {
    .quiz-frame {
        height: 600px;
    }
    .right-side {
        padding: 0rem;
    }
}
.responsive-form {
    position: relative;
    padding-bottom: 150%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
}
.responsive-form iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.form-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    font-size: 1rem;
    color: #4b5563;
    background-color: #f9fafb;
}
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}
.fade-in {
    animation: fadeIn 0.6s ease forwards;
}
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.reload-btn {
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    background-color: #3b82f6;
    color: #fff;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.3s ease;
}
.reload-btn:hover {
    background-color: #2563eb;
}
.toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) scale(0.95);
    background-color: #323232;
    color: #fff;
    padding: 12px 24px;
    border-radius: 24px;
    font-size: 14px;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
    z-index: 9999;
}
.toast.show {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}
h2,
h4 {
    font-weight: 700;
    color: #1a1a1a;
    margin-top: 30px;
    margin-bottom: 15px;
}
.light-mode h4 {
    font-size: 1.6em;
    color: #2980b9;
}
.dark-mode h4 {
    font-size: 1.6em;
    color: #6bbdf3;
}
.light-mode ul {
    font-size: 1.05em;
    text-align: justify;
    color: #444;
}
.light-mode li {
    color: #001f6e;
}
.dark-mode li {
    color: #00fff7;
}
.dark-mode ul {
    font-size: 1.05em;
    text-align: justify;
    color: #f3eaea;
}
.light-mode strong {
    color: #4e0707;
}
.dark-mode strong {
    color: #0ef5b7;
}
@media (min-width: 768px) {
    h4 {
        font-size: 1.4em;
    }
    li {
        font-size: 1em;
    }
}
@media (max-width: 600px) {
    h4 {
        font-size: 1.4em;
    }
    li {
        font-size: 1em;
    }
}
@media (max-width: 477px) {
    h4 {
        font-size: 1.4em;
    }
}
@media (min-width: 478px) and (max-width: 988px) {
    body {
        padding-top: 1px;
    }
    .mobile-bottom-navigation {
        background: rgb(218 249 246 / 0.849);
        position: fixed;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        max-width: 500%;
        margin: auto;
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 0;
        box-shadow: 0 0 10px hsl(0 78% 52% / 0.25);
        z-index: 5;
        gap: 63px;
    }
    .mobile-bottom-navigation .action-btn,
    .mobile-bottom-navigation .action-btn-home {
        position: relative;
        font-size: 25px;
        color: #53f137;
        padding: 5px;
    }
    .mobile-bottom-navigation .action-btn-home {
        margin-left: 0;
    }
    .mobile-bottom-navigation .action-btn {
        margin-left: 7px;
    }
    .mobile-bottom-navigation .count {
        background: var(--bittersweet);
        color: var(--white);
        position: absolute;
        top: 0;
        right: 0;
        font-size: 12px;
        font-weight: var(--weight-500);
        line-height: 1;
        padding: 2px 0;
        border-radius: 20px;
    }
}
@media (min-width: 478px) and (max-width: 1700px) {
    .light-mode .side-text h2 {
        color: #002efc;
        text-align: center;
        font-size: 31px;
    }
    .light-mode .side-text-a h2 {
        color: #002efc;
        text-align: center;
        font-size: 25px;
    }
    .dark-mode .side-text h2 {
        color: #04fce3f1;
        text-align: center;
        font-size: 31px;
    }
    .dark-mode .side-text-a h2 {
        color: #04fce3f1;
        text-align: center;
        font-size: 25px;
    }
    .dark-mode .additional-info-box {
        background: linear-gradient(135deg, #2c3e50 0%, #1a2a3a 50%, #2575fc 100%);
        border-radius: 18px;
        padding: 32px 36px;
        margin-top: 16px;
        line-height: 1.7;
        font-size: 15.5px;
        color: #fff;
        border: none;
        box-shadow:
            0 8px 32px rgb(0 0 0 / 0.25),
            inset 0 1px 0 rgb(255 255 255 / 0.1);
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
        position: relative;
        overflow: hidden;
        border-left: 5px solid #4b8bff;
    }
    .dark-mode .additional-info-box::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.1), transparent);
        z-index: 1;
    }
    .light-mode .additional-info-box {
        background: linear-gradient(135deg, #f8f9ff 0%, #e3f2fd 50%, #f0f7ff 100%);
        border-radius: 18px;
        padding: 28px 32px;
        margin-top: 16px;
        line-height: 1.7;
        font-size: 15.5px;
        color: #2d3748;
        border: 1px solid rgb(255 255 255 / 0.3);
        box-shadow:
            0 8px 32px rgb(0 107 255 / 0.08),
            0 4px 12px rgb(0 0 0 / 0.05);
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
        position: relative;
        overflow: hidden;
        border-left: 5px solid #4b8bff;
    }
    .light-mode .additional-info-box::after {
        content: "";
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(
            to bottom right,
            rgb(255 255 255 / 0.3) 0%,
            rgb(255 255 255 / 0.1) 50%,
            transparent 100%
        );
        transform: rotate(30deg);
        pointer-events: none;
    }
    .additional-info-box:hover {
        transform: translateY(-6px) scale(1.01);
        box-shadow:
            0 16px 48px rgb(0 0 0 / 0.2),
            0 8px 24px rgb(0 107 255 / 0.15);
        border-left: 5px solid #6ba8ff;
    }
    .dark-mode .additional-info-box:hover {
        background: linear-gradient(135deg, #364f6b 0%, #2a3b50 50%, #3d7afc 100%);
    }
    .light-mode .additional-info-box:hover {
        background: linear-gradient(135deg, #ffffff 0%, #edf6ff 50%, #f5fbff 100%);
    }
    .light-mode .additional-info-box p {
        white-space: pre-line;
        margin: 0;
        font-weight: 400;
        letter-spacing: 0.4px;
        line-height: 1.6;
        color: #1a202c;
        text-shadow: 0 1px 1px rgb(255 255 255 / 0.8);
    }
    .dark-mode .additional-info-box p {
        white-space: pre-line;
        margin: 0;
        font-weight: 400;
        letter-spacing: 0.4px;
        line-height: 1.6;
        color: #e2e8f0;
        text-shadow: 0 1px 2px rgb(0 0 0 / 0.2);
    }
    .additional-info-box .feature-heading {
        font-size: 20px;
        background: linear-gradient(90deg, #4bb8ff, #6d8bff);
        -webkit-background-clip: text;
        background-clip: text;
        color: #fff0;
        text-align: center;
        font-weight: 700 !important;
        line-height: 1.3;
        margin-bottom: 16px !important;
        padding-bottom: 8px;
        position: relative;
        letter-spacing: -0.2px;
    }
    .dark-mode .additional-info-box .feature-heading {
        background: linear-gradient(90deg, #6dccff, #8babff);
        -webkit-background-clip: text;
        background-clip: text;
    }
    .additional-info-box .feature-heading::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 25%;
        right: 25%;
        height: 2px;
        background: linear-gradient(90deg, transparent, #4bb8ff, transparent);
        border-radius: 2px;
    }
    .additional-info-box p span {
        font-size: 20px;
        margin-right: 8px;
        vertical-align: middle;
        filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.1));
        display: inline-block;
        transition: transform 0.3s ease;
    }
    .additional-info-box:hover p span {
        transform: scale(1.1) rotate(5deg);
    }
    .additional-info-box ul,
    .additional-info-box ol {
        padding-left: 24px;
        margin: 12px 0;
    }
    .additional-info-box li {
        margin-bottom: 8px;
        padding-left: 4px;
    }
    @keyframes subtleFloat {
        0%,
        100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-2px);
        }
    }
    .additional-info-box {
        animation: subtleFloat 6s ease-in-out infinite;
    }
    @media (max-width: 768px) {
        .dark-mode .additional-info-box,
        .light-mode .additional-info-box {
            padding: 24px 20px;
            margin-top: 12px;
            border-radius: 16px;
            font-size: 15px;
        }
        .additional-info-box .feature-heading {
            font-size: 18px;
        }
        .additional-info-box:hover {
            transform: translateY(-4px);
        }
    }
    .dark-mode .feature-box {
        background: linear-gradient(135deg, #2c3e50 0%, #1a2a3a 50%, #2575fc 100%);
        border-radius: 18px;
        padding: 32px 36px;
        margin-top: 16px;
        line-height: 1.7;
        font-size: 15.5px;
        color: #fff;
        border: none;
        box-shadow:
            0 8px 32px rgb(0 0 0 / 0.25),
            inset 0 1px 0 rgb(255 255 255 / 0.1);
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
        position: relative;
        overflow: hidden;
        border-left: 5px solid #4b8bff;
    }
    .dark-mode .feature-box::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.1), transparent);
        z-index: 1;
    }
    .light-mode .feature-box {
        background: linear-gradient(135deg, #f8f9ff 0%, #e3f2fd 50%, #f0f7ff 100%);
        border-radius: 18px;
        padding: 28px 32px;
        margin-top: 16px;
        line-height: 1.7;
        font-size: 15.5px;
        color: #2d3748;
        border: 1px solid rgb(255 255 255 / 0.3);
        box-shadow:
            0 8px 32px rgb(0 107 255 / 0.08),
            0 4px 12px rgb(0 0 0 / 0.05);
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
        position: relative;
        overflow: hidden;
        border-left: 5px solid #4b8bff;
    }
    .light-mode .feature-box::after {
        content: "";
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(
            to bottom right,
            rgb(255 255 255 / 0.3) 0%,
            rgb(255 255 255 / 0.1) 50%,
            transparent 100%
        );
        transform: rotate(30deg);
        pointer-events: none;
    }
    .feature-box:hover {
        transform: translateY(-6px) scale(1.01);
        box-shadow:
            0 16px 48px rgb(0 0 0 / 0.2),
            0 8px 24px rgb(0 107 255 / 0.15);
        border-left: 5px solid #6ba8ff;
    }
    .dark-mode .feature-box:hover {
        background: linear-gradient(135deg, #364f6b 0%, #2a3b50 50%, #3d7afc 100%);
    }
    .light-mode .feature-box:hover {
        background: linear-gradient(135deg, #ffffff 0%, #edf6ff 50%, #f5fbff 100%);
    }
    .light-mode .feature-box p {
        white-space: pre-line;
        margin: 0;
        font-weight: 400;
        letter-spacing: 0.4px;
        line-height: 1.6;
        color: #1a202c;
        text-shadow: 0 1px 1px rgb(255 255 255 / 0.8);
    }
    .dark-mode .feature-box p {
        white-space: pre-line;
        margin: 0;
        font-weight: 400;
        letter-spacing: 0.4px;
        line-height: 1.6;
        color: #e2e8f0;
        text-shadow: 0 1px 2px rgb(0 0 0 / 0.2);
    }
    .feature-box .feature-heading {
        font-size: 20px;
        background: linear-gradient(90deg, #4bb8ff, #6d8bff);
        -webkit-background-clip: text;
        background-clip: text;
        color: #fff0;
        text-align: center;
        font-weight: 700 !important;
        line-height: 1.3;
        margin-bottom: 16px !important;
        padding-bottom: 8px;
        position: relative;
        letter-spacing: -0.2px;
    }
    .dark-mode .feature-box .feature-heading {
        background: linear-gradient(90deg, #6dccff, #8babff);
        -webkit-background-clip: text;
        background-clip: text;
    }
    .feature-box .feature-heading::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 25%;
        right: 25%;
        height: 2px;
        background: linear-gradient(90deg, transparent, #4bb8ff, transparent);
        border-radius: 2px;
    }
    .feature-box p span {
        font-size: 20px;
        margin-right: 8px;
        vertical-align: middle;
        filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.1));
        display: inline-block;
        transition: transform 0.3s ease;
    }
    .feature-box:hover p span {
        transform: scale(1.1) rotate(5deg);
    }
    .feature-box ul,
    .feature-box ol {
        padding-left: 24px;
        margin: 12px 0;
    }
    .feature-box li {
        margin-bottom: 8px;
        padding-left: 4px;
    }
    @keyframes subtleFloat {
        0%,
        100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-2px);
        }
    }
    .feature-box {
        animation: subtleFloat 6s ease-in-out infinite;
    }
    @media (max-width: 768px) {
        .dark-mode .feature-box,
        .light-mode .feature-box {
            padding: 24px 20px;
            margin-top: 12px;
            border-radius: 16px;
            font-size: 15px;
        }
        .feature-box .feature-heading {
            font-size: 18px;
        }
        .feature-box:hover {
            transform: translateY(-4px);
        }
    }
}
@media (max-width: 477px) {
    .big-text-a {
        font-size: 17px;
        line-height: 2 !important;
    }
    .big-text {
        font-size: 14px;
        line-height: 2 !important;
    }
}
@media (min-width: 478px) and (max-width: 600px) {
    .big-text-a {
        font-size: 17px;
        line-height: 2 !important;
    }
    .big-text {
        font-size: 16px;
        line-height: 2 !important;
    }
}
@media (min-width: 601px) and (max-width: 1700px) {
    .big-text-a {
        font-size: 18px;
        line-height: 2 !important;
    }
    .big-text {
        font-size: 18px;
        line-height: 2 !important;
    }
    .menu-close-btn {
        margin-top: 45px;
        margin-top: -11vh;
    }
    .menu-close-btn-a {
        margin-top: 45px;
    }
    .menu-close-btn:hover {
        transform: scale(1.1);
    }
    .menu-close-btn-a:hover {
        transform: scale(1.1);
    }
}
@media (min-width: 478px) and (max-width: 989px) {
    .header-top,
    .header-user-actions,
    .desktop-navigation-menu {
        display: none;
    }
    .menu-close-btn {
        margin-top: 45px;
        margin-top: -11vh;
    }
    .menu-close-btn-a {
        margin-top: 45px;
    }
    .menu-close-btn:hover {
        transform: scale(1.1);
    }
    .menu-close-btn-a:hover {
        transform: scale(1.1);
    }
    .header-main {
        padding: 20px;
        border-bottom: 1px solid var(--cultured);
        background-color: #e6eddb;
    }
    .header-logo {
        margin-bottom: 8px;
    }
    .header-logo {
        margin-top: 3px;
    }
    .header-logo img {
        margin: auto;
    }
    .header-main-a {
        padding: 20px 5;
        border-bottom: 1px solid var(--cultured);
        background-color: #e6eddb;
    }
    .dark-mode .header-main-a {
        padding: 20px 5;
        border-bottom: 1px solid var(--cultured);
        background-color: #faf3f3db;
    }
    .header-logo-a {
        margin-bottom: 8px;
    }
    .header-logo-a {
        margin-top: 3px;
    }
    .header-logo-a img {
        margin: auto;
    }
    .datetime {
        display: inline-block;
        padding: 12px 20px;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        font-size: 12px;
        font-weight: 500;
        color: #2c3e50;
        background: linear-gradient(135deg, #f9f9f9, #eaeaea);
        border-radius: 12px;
        box-shadow: 0 4px 12px rgb(0 0 0 / 0.08);
        transition: all 0.3s ease;
        margin-top: 1px;
        max-width: 90%;
        word-wrap: break-word;
    }
    .datetime:hover {
        background: linear-gradient(135deg, #f0f0f0, #dcdcdc);
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgb(0 0 0 / 0.1);
    }
    .datetime-container {
        display: flex;
        justify-content: center;
        margin-top: 30px;
    }
    .datetime-a {
        display: inline-block;
        padding: 12px 20px;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        font-size: 17px;
        font-weight: 500;
        color: #2c3e50;
        background: linear-gradient(135deg, #f9f9f9, #eaeaea);
        border-radius: 12px;
        box-shadow: 0 4px 12px rgb(0 0 0 / 0.08);
        transition: all 0.3s ease;
        margin-top: 1px;
        max-width: 90%;
        word-wrap: break-word;
    }
    .datetime-a:hover {
        background: linear-gradient(135deg, #f0f0f0, #dcdcdc);
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgb(0 0 0 / 0.1);
    }
    .datetime-a-container {
        display: flex;
        justify-content: center;
        margin-top: 30px;
    }
}
@media (min-width: 1200px) {
    .menu-close-btn {
        margin-top: 60px;
    }
}
@media (max-width: 477px) {
    .menu-close-btn {
        margin-top: 45px;
    }
    .menu-close-btn:hover {
        transform: scale(1.1);
    }
    .mobile-navigation-menu {
        background: rgb(220 234 252 / 0.897);
        position: fixed;
        top: 0;
        left: -100%;
        width: 100%;
        max-width: 400px;
        height: 100vh;
        padding: 20px;
        box-shadow: 0 0 10px hsl(0 0% 0% / 0.1);
        overflow-y: scroll;
        overscroll-behavior: contain;
        visibility: hidden;
        transition: 0.5s ease;
        z-index: 20;
    }
    .dark-mode .mobile-navigation-menu {
        background: rgb(5 5 5 / 0.84);
    }
    .mobile-navigation-menu.active {
        left: 0;
        visibility: visible;
    }
    .menu-top {
        margin-top: -65px;
        padding-bottom: 0;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 2px solid var(--cultured);
    }
    .menu-top .menu-title {
        color: #fe5151;
        font-size: 34px;
        font-weight: var(--weight-600);
        margin-top: 55px;
    }
    .dark-mode .menu-top .menu-title {
        color: #f4e7e7;
    }
    .menu-top-a {
        margin-top: -65px;
        padding-bottom: 0;
        margin-bottom: 8px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 2px solid var(--cultured);
        direction: rtl;
    }
    .menu-top-a .menu-title-b {
        color: #fe5151;
        font-size: 34px;
        font-weight: var(--weight-600);
    }
    .dark-mode .menu-top-a .menu-title-b {
        color: #f4e7e7;
    }
    .mobile-menu-category-list-a {
        margin-bottom: 30px;
        direction: rtl;
    }
    .mobile-menu-category-list {
        margin-bottom: 30px;
        direction: ltr;
    }
    .menu-category .accordion-menu {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .mobile-menu-category-list-a .menu-category {
        border-bottom: 1px solid var(--border-radius-sm);
    }
    .mobile-menu-category-list-a .menu-title {
        color: rgb(0 217 255 / 0.993);
        font-size: var(--fs-3);
        font-weight: var(--weight-600);
        padding: 3px 0;
        transition:
            color 0.3s ease,
            padding 0.3s ease;
    }
    .mobile-menu-category-list-a .menu-title:hover {
        color: #6fff00;
        padding: 14px 9px;
    }
    .light-mode .mobile-menu-category-list-a .menu-title {
        color: rgb(119 0 119 / 0.89);
    }
    .light-mode .mobile-menu-category-list-a .menu-title:hover {
        color: rgb(0 68 255 / 0.861);
        padding: 14px 9px;
    }
    .mobile-menu-category-list .menu-category {
        border-bottom: 1px solid var(--border-radius-sm);
    }
    .mobile-menu-category-list .menu-title {
        color: rgb(0 217 255 / 0.993);
        font-size: var(--fs-3);
        font-weight: var(--weight-600);
        padding: 12px 0;
        transition:
            color 0.3s ease,
            padding 0.3s ease;
    }
    .mobile-menu-category-list .menu-title:hover {
        color: #6fff00;
        padding: 14px 9px;
    }
    .light-mode .mobile-menu-category-list .menu-title {
        color: rgb(119 0 119 / 0.89);
    }
    .light-mode .mobile-menu-category-list .menu-title:hover {
        color: rgb(0 68 255 / 0.861);
        padding: 14px 9px;
    }
    .accordion-menu > div {
        font-size: 14px;
    }
    .accordion-menu .fas,
    .accordion-menu .far,
    .accordion-menu .fab {
        color: var(--onyx);
        font-size: 90px;
    }
    .accordion-menu.active .add-icon,
    .accordion-menu .remove-icon {
        display: none;
    }
    .accordion-menu .add-icon,
    .accordion-menu.active .remove-icon {
        display: block;
    }
    .menu-category .submenu-category-list {
        margin-left: 100px;
    }
    .datetime {
        display: inline-block;
        padding: 1px 2px;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        font-size: 1px;
        font-weight: 500;
        color: #2c3e50;
        background: linear-gradient(135deg, #f9f9f9, #eaeaea);
        border-radius: 12px;
        box-shadow: 0 4px 12px rgb(0 0 0 / 0.08);
        transition: all 0.3s ease;
        margin-top: 1px;
        max-width: 90%;
        word-wrap: break-word;
    }
    .datetime:hover {
        background: linear-gradient(135deg, #f0f0f0, #dcdcdc);
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgb(0 0 0 / 0.1);
    }
    .datetime-container {
        display: flex;
        justify-content: center;
        margin-top: 30px;
    }
    .datetime-a {
        display: inline-block;
        padding: 12px 2px;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        font-size: 18px;
        font-weight: 500;
        color: #2c3e50;
        background: linear-gradient(135deg, #f9f9f9, #eaeaea);
        border-radius: 12px;
        box-shadow: 0 4px 12px rgb(0 0 0 / 0.08);
        transition: all 0.3s ease;
        margin-top: 1px;
        max-width: 90%;
        word-wrap: break-word;
    }
    .datetime-a:hover {
        background: linear-gradient(135deg, #f0f0f0, #dcdcdc);
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgb(0 0 0 / 0.1);
    }
    .datetime-a-container {
        display: flex;
        justify-content: center;
        margin-top: 30px;
    }
}
@media (min-width: 478px) and (max-width: 1200px) {
    .menu-close-btn {
        margin-top: 35px;
    }
    .menu-close-btn:hover {
        transform: scale(1.1);
    }
    .menu-close-btn-a {
        margin-top: 35px;
    }
    .menu-close-btn-a:hover {
        transform: scale(1.1);
    }
    .mobile-navigation-menu {
        background: rgb(220 234 252 / 0.897);
        position: fixed;
        top: 0;
        left: -100%;
        width: 100%;
        max-width: 400px;
        height: 100vh;
        padding: 20px;
        box-shadow: 0 0 10px hsl(0 0% 0% / 0.1);
        overflow-y: scroll;
        overscroll-behavior: contain;
        visibility: hidden;
        transition: 0.5s ease;
        z-index: 20;
    }
    .dark-mode .mobile-navigation-menu {
        background: rgb(5 5 5 / 0.84);
    }
    .mobile-navigation-menu.active {
        left: 0;
        visibility: visible;
    }
    .menu-top {
        margin-top: -65px;
        padding-bottom: 0;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 2px solid var(--cultured);
    }
    .menu-top .menu-title {
        color: #fe5151;
        font-size: 34px;
        font-weight: var(--weight-600);
        margin-top: 55px;
    }
    .dark-mode .menu-top .menu-title {
        color: #f4e7e7;
    }
    .menu-top-a {
        margin-top: -55px;
        padding-bottom: 0;
        margin-bottom: 8px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 2px solid var(--cultured);
        direction: rtl;
    }
    .menu-top-a .menu-title-b {
        color: #fe5151;
        font-size: 34px;
        font-weight: var(--weight-600);
        margin-bottom: 30px;
    }
    .dark-mode .menu-top-a .menu-title-b {
        color: #f4e7e7;
    }
    .mobile-menu-category-list-a {
        margin-bottom: 30px;
        direction: rtl;
    }
    .mobile-menu-category-list {
        margin-bottom: 30px;
        direction: ltr;
    }
    .menu-category .accordion-menu {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .mobile-menu-category-list-a .menu-category {
        border-bottom: 1px solid var(--border-radius-sm);
    }
    .mobile-menu-category-list-a .menu-title {
        color: rgb(0 217 255 / 0.993);
        font-size: var(--fs-3);
        font-weight: var(--weight-600);
        padding: 3px 0;
        transition:
            color 0.3s ease,
            padding 0.3s ease;
    }
    .mobile-menu-category-list-a .menu-title:hover {
        color: #6fff00;
        padding: 14px 9px;
    }
    .light-mode .mobile-menu-category-list-a .menu-title {
        color: rgb(119 0 119 / 0.89);
    }
    .light-mode .mobile-menu-category-list-a .menu-title:hover {
        color: rgb(0 68 255 / 0.861);
        padding: 14px 9px;
    }
    .mobile-menu-category-list .menu-category {
        border-bottom: 1px solid var(--border-radius-sm);
    }
    .mobile-menu-category-list .menu-title {
        color: rgb(0 217 255 / 0.993);
        font-size: var(--fs-3);
        font-weight: var(--weight-600);
        padding: 12px 0;
        transition:
            color 0.3s ease,
            padding 0.3s ease;
    }
    .mobile-menu-category-list .menu-title:hover {
        color: #6fff00;
        padding: 14px 9px;
    }
    .light-mode .mobile-menu-category-list .menu-title {
        color: rgb(119 0 119 / 0.89);
    }
    .light-mode .mobile-menu-category-list .menu-title:hover {
        color: rgb(0 68 255 / 0.861);
        padding: 14px 9px;
    }
    .accordion-menu > div {
        font-size: 14px;
    }
    .accordion-menu .fas,
    .accordion-menu .far,
    .accordion-menu .fab {
        color: var(--onyx);
        font-size: 90px;
    }
    .accordion-menu.active .add-icon,
    .accordion-menu .remove-icon {
        display: none;
    }
    .accordion-menu .add-icon,
    .accordion-menu.active .remove-icon {
        display: block;
    }
    .menu-category .submenu-category-list {
        margin-left: 100px;
    }
}
@media (max-width: 477px) {
    .menu-close-btn {
        margin-top: 40px;
    }
    .menu-close-btn-a {
        margin-top: 40px;
    }
    .menu-close-btn:hover {
        transform: scale(1.1);
    }
    .menu-close-btn-a:hover {
        transform: scale(1.1);
    }
    .mobile-navigation-menu {
        background: rgb(220 234 252 / 0.897);
        position: fixed;
        top: 0;
        left: -100%;
        width: 100%;
        max-width: 400px;
        height: 100vh;
        padding: 20px;
        box-shadow: 0 0 10px hsl(0 0% 0% / 0.1);
        overflow-y: scroll;
        overscroll-behavior: contain;
        visibility: hidden;
        transition: 0.5s ease;
        z-index: 20;
    }
    .dark-mode .mobile-navigation-menu {
        background: rgb(5 5 5 / 0.84);
    }
    .mobile-navigation-menu.active {
        left: 0;
        visibility: visible;
    }
    .menu-top {
        margin-top: -65px;
        padding-bottom: 0;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 2px solid var(--cultured);
    }
    .menu-top .menu-title {
        color: #fe5151;
        font-size: 34px;
        font-weight: var(--weight-600);
        margin-top: 55px;
    }
    .dark-mode .menu-top .menu-title {
        color: #f4e7e7;
    }
    .menu-top-a {
        margin-top: -53px;
        padding-bottom: 0;
        margin-bottom: 8px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 2px solid var(--cultured);
        direction: rtl;
    }
    .menu-top-a .menu-title-b {
        color: #fe5151;
        font-size: 34px;
        font-weight: var(--weight-600);
        margin-bottom: 30px;
    }
    .dark-mode .menu-top-a .menu-title-b {
        color: #f4e7e7;
    }
    .mobile-menu-category-list-a {
        margin-bottom: 30px;
        direction: rtl;
    }
    .mobile-menu-category-list {
        margin-bottom: 30px;
        direction: ltr;
    }
    .menu-category .accordion-menu {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .mobile-menu-category-list-a .menu-category {
        border-bottom: 1px solid var(--border-radius-sm);
    }
    .mobile-menu-category-list-a .menu-title {
        color: rgb(0 217 255 / 0.993);
        font-size: var(--fs-3);
        font-weight: var(--weight-600);
        padding: 3px 0;
        transition:
            color 0.3s ease,
            padding 0.3s ease;
    }
    .mobile-menu-category-list-a .menu-title:hover {
        color: #6fff00;
        padding: 14px 9px;
    }
    .light-mode .mobile-menu-category-list-a .menu-title {
        color: rgb(119 0 119 / 0.89);
    }
    .light-mode .mobile-menu-category-list-a .menu-title:hover {
        color: rgb(0 68 255 / 0.861);
        padding: 14px 9px;
    }
    .mobile-menu-category-list .menu-category {
        border-bottom: 1px solid var(--border-radius-sm);
    }
    .mobile-menu-category-list .menu-title {
        color: rgb(0 217 255 / 0.993);
        font-size: var(--fs-3);
        font-weight: var(--weight-600);
        padding: 12px 0;
        transition:
            color 0.3s ease,
            padding 0.3s ease;
    }
    .mobile-menu-category-list .menu-title:hover {
        color: #6fff00;
        padding: 14px 9px;
    }
    .light-mode .mobile-menu-category-list .menu-title {
        color: rgb(119 0 119 / 0.89);
    }
    .light-mode .mobile-menu-category-list .menu-title:hover {
        color: rgb(0 68 255 / 0.861);
        padding: 14px 9px;
    }
    .accordion-menu > div {
        font-size: 14px;
    }
    .accordion-menu .fas,
    .accordion-menu .far,
    .accordion-menu .fab {
        color: var(--onyx);
        font-size: 90px;
    }
    .accordion-menu.active .add-icon,
    .accordion-menu .remove-icon {
        display: none;
    }
    .accordion-menu .add-icon,
    .accordion-menu.active .remove-icon {
        display: block;
    }
    .menu-category .submenu-category-list {
        margin-left: 100px;
    }
}