body{font-family:'Noto Sans Arabic',sans-serif;background:linear-gradient(to bottom,#f9f9ff,#f0f3ff);color:#333;line-height:1.6}
.hero-section{background:linear-gradient(to right,var(--primary-color),var(--secondary-color));color:#fff;padding:100px 0;position:relative;overflow:hidden}
.hero-section::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23ffffff" fill-opacity="0.1" d="M0,128L48,117.3C96,107,192,85,288,112C384,139,480,213,576,218.7C672,224,768,160,864,138.7C960,117,1056,139,1152,149.3C1248,160,1344,160,1392,160L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>');background-size:cover;background-position:center bottom}
.navbar{background:rgba(255,255,255,0.95);box-shadow:0 2px 15px rgba(0,0,0,0.1);padding:15px 0}
.navbar-brand{font-weight:700;color:var(--primary-color)}
.nav-link{color:#555;font-weight:500;margin:0 10px;transition:.3s}
.nav-link:hover{color:var(--primary-color)}
.btn-primary{background:linear-gradient(to right,var(--primary-color),var(--secondary-color));border:none;border-radius:50px;padding:12px 30px;font-weight:600;transition:.3s}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 10px 20px rgba(78,84,200,0.3)}
.section-title{position:relative;margin-bottom:50px;font-weight:700}
.section-title::after{content:'';position:absolute;bottom:-15px;right:0;width:70px;height:4px;background:linear-gradient(to right,var(--primary-color),var(--secondary-color));border-radius:2px}
.course-card{background:#fff;border-radius:15px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,0.08);transition:.3s;margin-bottom:30px;height:100%}
.course-card:hover{transform:translateY(-10px);box-shadow:0 15px 35px rgba(0,0,0,0.1)}
.course-img{height:200px;object-fit:cover;width:100%}
.course-badge{position:absolute;top:15px;left:15px;background:var(--accent-color);color:#fff;padding:5px 15px;border-radius:50px;font-size:12px;font-weight:600}
.features-section{background:#fff;padding:80px 0}
.feature-box{text-align:center;padding:30px 20px;border-radius:15px;transition:.3s;margin-bottom:30px;background:#f9f9ff;height:100%}
.feature-box:hover{transform:translateY(-5px);box-shadow:0 10px 25px rgba(0,0,0,0.1)}
.feature-icon{font-size:40px;margin-bottom:20px;color:var(--primary-color);background:linear-gradient(45deg,rgba(78,84,200,0.1),rgba(143,148,251,0.1));width:80px;height:80px;line-height:80px;border-radius:50%;display:inline-block}
.testimonial-card{background:#fff;border-radius:15px;padding:30px;box-shadow:0 10px 30px rgba(0,0,0,0.08);margin:15px;position:relative}
.testimonial-card::before{content:'"';font-size:80px;position:absolute;top:20px;right:30px;color:rgba(78,84,200,0.1);font-family:Georgia,serif}
.testimonial-avatar{width:70px;height:70px;border-radius:50%;object-fit:cover;border:4px solid #fff;box-shadow:0 5px 15px rgba(0,0,0,0.1)}
.cta-section{background:linear-gradient(to right,var(--primary-color),var(--secondary-color));color:#fff;padding:80px 0;text-align:center}
footer{background:#1a1a40;color:#fff;padding:60px 0 30px}
.social-icons a{color:#fff;font-size:18px;margin:0 10px;transition:.3s}
.social-icons a:hover{color:var(--accent-color)}
.back-to-top{position:fixed;bottom:30px;right:30px;width:50px;height:50px;border-radius:50%;background:var(--primary-color);color:#fff;display:flex;align-items:center;justify-content:center;text-decoration:none;box-shadow:0 5px 15px rgba(0,0,0,0.1);z-index:1000;transition:.3s}
.back-to-top:hover{background:var(--secondary-color);transform:translateY(-5px)}
.countdown-box{background:rgba(255,255,255,0.15);backdrop-filter:blur(10px);border-radius:15px;padding:20px;text-align:center;margin:20px 0}
.countdown-number{font-size:2.5rem;font-weight:700}
.countdown-label{font-size:.9rem;opacity:.9}
@media(max-width:768px){.hero-section{padding:80px 0}.section-title{font-size:1.8rem}}

.countdown-box{background:linear-gradient(135deg,#6a11cb 0%,#2575fc 100%);color:#fff;border-radius:15px;padding:25px;box-shadow:0 10px 30px rgba(0,0,0,.15);margin-bottom:30px}
.countdown-number{font-size:3rem;font-weight:bold;margin-bottom:5px}
.countdown-label{font-size:1rem;opacity:.9}
.btn-primary{background:linear-gradient(to right,#6a11cb,#2575fc);border:none;border-radius:50px;padding:12px 30px;font-weight:600;box-shadow:0 4px 15px rgba(106,17,203,.4);transition:.3s}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(106,17,203,.6)}
.modal-content{border-radius:20px;overflow:hidden;border:none}
.modal-header{background:linear-gradient(to right,#6a11cb,#2575fc);color:#fff;border-bottom:none}
.modal-title{font-weight:700}
.btn-close{filter:invert(1)}
.modal-body{padding:25px;font-size:1.1rem;line-height:1.8}
.modal-icon{font-size:3rem;color:#6a11cb;margin-bottom:20px}
.feature-list{text-align:right;list-style:none;padding:0}
.feature-list li{padding:8px 30px 8px 0;position:relative}
.feature-list li:before{content:"✓";position:absolute;right:0;color:#6a11cb;font-weight:bold}
@media(max-width:576px){.countdown-number{font-size:3rem}.d-flex{flex-direction:column;gap:20px}}


.course-price {font-size: 1.5rem; font-weight: bold; color: var(--primary-color);}
.course-price-old {text-decoration: line-through; color: #999; font-size: 1.1rem;}
.installment {font-size: 0.9rem; color: var(--success-color);}
.faq-card {border: none; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.08); margin-bottom: 15px;}
.faq-header {background: linear-gradient(to right, #f8f9fa, #e9ecef); border-radius: 10px 10px 0 0 !important;}
.faq-title {margin-bottom: 0;}
.testimonial-certificate {position: absolute; bottom: 10px; right: 10px;}
.certificate-badge {background: var(--accent-color); color: white; padding: 3px 8px; border-radius: 4px; font-size: 0.8rem; cursor: pointer;}
.whatsapp-chat {position: fixed; left: 20px; bottom: 20px; z-index: 1000;}
.whatsapp-chat-btn {background: #25D366; color: white; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(0,0,0,0.3); animation: pulse 2s infinite;}
@keyframes pulse {0%{box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);} 70%{box-shadow: 0 0 0 10px rgba(37, 211, 102, 0);} 100%{box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);}}
.countdown-active {background: linear-gradient(to right, #ff7e5f, #feb47b); padding: 10px; border-radius: 8px; color: white; text-align: center;}