/* Reset & Base Styles */
 * {
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   outline: none !important;
 }

 body,
 div,
 span,
 applet,
 object,
 iframe,
 p,
 blockquote,
 pre,
 a,
 abbr,
 acronym,
 address,
 big,
 cite,
 code,
 del,
 dfn,
 em,
 img,
 ins,
 kbd,
 q,
 s,
 samp,
 small,
 strike,
 strong,
 sub,
 sup,
 tt,
 var,
 b,
 u,
 i,
 center,
 dl,
 dt,
 dd,
 ol,
 ul,
 li,
 fieldset,
 form,
 label,
 legend,
 table,
 caption,
 tbody,
 tfoot,
 thead,
 tr,
 th,
 td,
 article,
 aside,
 canvas,
 details,
 embed,
 figure,
 figcaption,
 footer,
 header,
 hgroup,
 menu,
 nav,
 output,
 ruby,
 section,
 summary,
 time,
 mark,
 audio,
 video {
   margin: 0;
   padding: 0;
   border: 0
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
   font-weight: normal;
   margin: 0;
   padding: 0;
   border: 0;
 }

 article,
 aside,
 details,
 figcaption,
 figure,
 footer,
 header,
 hgroup,
 main,
 menu,
 nav,
 section,
 summary {
   display: block
 }

 a {
   text-decoration: none;
   display: inline-block;
 }

 b,
 strong {
   font-weight: bold
 }

 img {
   max-width: 100%;
   height: auto;
   display: block;
   border: 0;
   vertical-align: middle;
 }

 svg:not(:root) {
   overflow: hidden;
   max-width: 100%;
   height: auto;
   display: block;
   border: 0;
   vertical-align: middle;
 }

 img,
 svg {
   width: 100%;
 }

 ul {
   list-style: none;
 }

 /* Custom Properties */
 :root {
   --primary-color: #ce902b;
   --primary-light: #fcb23d;
   --primary-dark: #a87321;
   --primary-bg: #f9f5eb;
   --text-color: #333;
   --text-light: #666;
   --white: #fff;
   --shadow-sm: 0 5px 15px rgba(0, 0, 0, 0.05);
   --shadow-md: 0 10px 20px rgba(0, 0, 0, 0.1);
   --shadow-lg: 0 15px 30px rgba(0, 0, 0, 0.15);
   --transition: all 0.3s ease;
   --border-radius: 15px;
 }

 /* Typography */
 @font-face {
   font-family: 'Ahlan-world-Arbfonts';
   src: url('fonts/Ahlan-world-Arbfonts.ttf');
 }

 * {
   font-family: 'Ahlan-world-Arbfonts';
 }

 body {
   margin: 0;
   /* padding-bottom: 80px; */
   color: var(--text-color);
   background-color: #fafafa;
   overflow-x: hidden;
   line-height: 1.6;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
   font-weight: 600;
   color: var(--primary-color);
   line-height: 1.3;
 }

 p,
 li {
   font-size: 22px;
   color: var(--text-color);
   line-height: 1.7;
 }

 a {
   color: var(--primary-color);
   transition: var(--transition);
 }

 /* Layout */
 .container {
   max-width: 1300px;
   padding: 0 25px;
   margin: 0 auto;
   text-align: center;
 }

 section {
   /* margin-top: 100px; */
   padding: 40px 0;
   position: relative;
 }

 section:nth-child(1) {
   margin-top: 0;
 }

 section:nth-child(even) {
   background-color: var(--primary-bg);
 }

 /* Header & Navigation */
 .header {
   background-color: var(--white);
   box-shadow: var(--shadow-sm);
   position: sticky;
   top: 0;
   z-index: 1000;
   padding: 15px 0;
   transition: var(--transition);
 }

 .header.scrolled {
   padding: 10px 0;
   box-shadow: var(--shadow-md);
 }

 .nav-container {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }

 .logo {
   font-size: 24px;
   font-weight: 700;
   color: var(--primary-color);
 }

 .nav-links {
   display: flex;
   gap: 30px;
   align-items: center;
 }

 .nav-links a {
   font-size: 18px;
   font-weight: 500;
   color: var(--text-color);
   transition: var(--transition);
 }

 .nav-links a:hover {
   color: var(--primary-color);
 }

 .nav-links .nav-cta {
   background-color: var(--primary-color);
   color: var(--white);
   padding: 8px 15px;
   border-radius: 50px;
   font-weight: 600;
 }

 .nav-links .nav-cta:hover {
   background-color: var(--primary-dark);
   color: var(--white);
   transform: translateY(-3px);
   box-shadow: var(--shadow-sm);
 }

 .mobile-menu-btn {
   display: none;
   background: none;
   border: none;
   font-size: 24px;
   color: var(--primary-color);
   cursor: pointer;
   z-index: 1001;
 }

 /* Mobile Menu */
 .mobile-menu {
   position: fixed;
   top: 0;
   right: -100%;
   width: 80%;
   max-width: 300px;
   height: 100vh;
   background-color: var(--white);
   box-shadow: var(--shadow-lg);
   z-index: 1000;
   padding: 80px 20px 20px;
   transition: var(--transition);
   display: flex;
   flex-direction: column;
   gap: 15px;
   overflow-y: auto;
 }

 .mobile-menu.active {
   right: 0;
 }

 .mobile-menu a {
   font-size: 18px;
   font-weight: 500;
   color: var(--text-color);
   padding: 12px 0;
   border-bottom: 1px solid rgba(0, 0, 0, 0.05);
   transition: var(--transition);
 }

 .mobile-menu a:hover {
   color: var(--primary-color);
   transform: translateX(-5px);
 }

 .mobile-menu .mobile-cta {
   background-color: var(--primary-color);
   color: var(--white);
   padding: 12px 20px;
   border-radius: 50px;
   font-weight: 600;
   text-align: center;
   margin-top: 15px;
   border-bottom: none;
 }

 .mobile-menu .mobile-cta:hover {
   background-color: var(--primary-dark);
   color: var(--white);
   transform: translateY(-3px);
 }

 .mobile-menu-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.5);
   z-index: 999;
   opacity: 0;
   visibility: hidden;
   transition: var(--transition);
 }

 .mobile-menu-overlay.active {
   opacity: 1;
   visibility: visible;
 }

 /* Hero Section */
 .hero {
   position: relative;
   overflow: hidden;
   padding: 80px 0;
   background: linear-gradient(135deg, var(--primary-bg) 0%, #fff 100%);
 }

 .hero::before {
   content: "";
   position: absolute;
   top: -50px;
   right: -50px;
   width: 200px;
   height: 200px;
   background-color: rgba(252, 178, 61, 0.1);
   border-radius: 50%;
   z-index: 0;
 }

 .hero::after {
   content: "";
   position: absolute;
   bottom: -50px;
   left: -50px;
   width: 200px;
   height: 200px;
   background-color: rgba(252, 178, 61, 0.1);
   border-radius: 50%;
   z-index: 0;
 }

 .hero-content {
   position: relative;
   z-index: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
 }

 .hero-title {
   font-size: 48px;
   margin-bottom: 20px;
   color: var(--primary-color);
   animation: fadeInUp 1s ease;
 }

 .hero-subtitle {
   font-size: 24px;
   margin-bottom: 40px;
   color: var(--text-light);
   max-width: 800px;
   animation: fadeInUp 1s ease 0.2s;
   animation-fill-mode: both;
 }

 .hero-image {
   max-width: 600px;
   margin: 40px auto;
   border-radius: var(--border-radius);
   box-shadow: var(--shadow-lg);
   overflow: hidden;
   animation: fadeInUp 1s ease 0.4s;
   animation-fill-mode: both;
 }

 /* Special Offer */
 .special-offer {
   background-color: var(--primary-color) !important;
   color: var(--white);
   padding: 40px 0;
   position: relative;
   overflow: hidden;
 }

 .special-offer p,
 .special-offer .section-title {
   color: var(--white);
 }

 .special-offer::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="rgba(255,255,255,0.05)"/></svg>');
   background-size: 100px 100px;
   opacity: 0.3;
 }

 .special-offer .title {
   color: var(--white);
   border-bottom-color: var(--white);
 }

 .countdown {
   display: flex;
   justify-content: center;
   gap: 20px;
   margin: 30px 0;
 }

 .countdown-item {
   display: flex;
   flex-direction: column;
   align-items: center;
   background-color: rgba(255, 255, 255, 0.1);
   border-radius: var(--border-radius);
   padding: 20px;
   min-width: 100px;
   box-shadow: var(--shadow-sm);
   transition: var(--transition);
 }

 .countdown-item:hover {
   transform: translateY(-5px);
   box-shadow: var(--shadow-md);
 }

 .countdown-value {
   font-size: 60px;
   font-weight: bold;
   color: var(--white);
 }

 .countdown-label {
   font-size: 20px;
   color: var(--white);
   margin-top: 10px;
 }

 /* Section Titles */
 .section-title {
   position: relative;
   font-size: 36px;
   font-weight: 700;
   color: var(--primary-color);
   margin-bottom: 60px;
   display: inline-block;
   padding-bottom: 15px;
 }

 .section-title::after {
   content: "";
   position: absolute;
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
   width: 80px;
   height: 3px;
   background-color: var(--primary-light);
   border-radius: 3px;
 }

 /* Course Topics */
 .topics-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   gap: 30px;
   margin-bottom: 40px;
   text-align: right;
 }

 .topic-card {
   border: 2px solid var(--primary-light);
   border-radius: var(--border-radius);
   padding: 25px;
   background-color: var(--white);
   box-shadow: var(--shadow-sm);
   transition: var(--transition);
   height: 100%;
 }

 .topic-card:hover {
   transform: translateY(-5px);
   box-shadow: var(--shadow-md);
 }

 .topic-number {
   font-size: 24px;
   font-weight: bold;
   color: var(--primary-color);
   margin-bottom: 15px;
   display: inline-block;
   border-bottom: 2px solid var(--primary-light);
   padding-bottom: 5px;
 }

 .topic-title {
   font-size: 28px;
   font-weight: bold;
   color: var(--primary-color);
   margin-bottom: 20px;
   text-align: right;
 }

 .topic-list {
   text-align: right;
 }

 .topic-list li {
   position: relative;
   padding-right: 25px;
   margin-bottom: 15px;
   font-size: 18px;
   line-height: 1.5;
 }

 .topic-list li:before {
   content: "•";
   color: var(--primary-color);
   font-size: 24px;
   position: absolute;
   right: 0;
   top: 0;
 }

 /* Course Features */
 .features-container {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
   grid-template-columns: repeat(auto-fill, minmax(48%, 1fr));
   gap: 30px;
   margin: 40px 0;
 }

 .feature-item {
   background-color: var(--white);
   border-radius: var(--border-radius);
   padding: 30px;
   box-shadow: var(--shadow-sm);
   transition: var(--transition);
   text-align: center;
 }

 .feature-item:hover {
   transform: translateY(-5px);
   box-shadow: var(--shadow-md);
 }

 .feature-icon {
   font-size: 40px;
   color: var(--primary-color);
   margin-bottom: 20px;
 }

 .feature-title {
   font-size: 22px;
   font-weight: 600;
   margin-bottom: 15px;
   color: var(--primary-color);
 }

 .feature-text {
   font-size: 18px;
   color: var(--text-light);
 }

 /* Results Section */
 .results-container {
   background-color: var(--white);
   border-radius: var(--border-radius);
   padding: 40px;
   box-shadow: var(--shadow-md);
   margin: 40px 0;
 }

 .result-item {
   display: flex;
   align-items: center;
   margin-bottom: 20px;
   text-align: right;
 }

 .result-icon {
   flex-shrink: 0;
   width: 40px;
   height: 40px;
   background-color: var(--primary-color);
   color: var(--white);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-left: 15px;
 }

 .result-text {
   font-size: 20px;
   line-height: 1.5;
 }

 /* For You Section */
 .for-you-container {
   background-color: var(--primary-bg);
   /* border-radius: var(--border-radius); */
   padding: 40px;
   /* margin-bottom: 40px; */
   position: relative;
   overflow: hidden;
   /* box-shadow: var(--shadow-md); */
 }

 .for-you-container::before {
   content: "";
   position: absolute;
   top: 0;
   right: 0;
   width: 150px;
   height: 150px;
   background-color: rgba(252, 178, 61, 0.1);
   border-radius: 0 0 0 150px;
   z-index: 0;
 }

 .for-you-items {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 20px;
   margin-top: 30px;
   position: relative;
   z-index: 1;
 }

 .for-you-item {
   flex: 1 1 300px;
   background-color: var(--white);
   border-radius: var(--border-radius);
   padding: 25px;
   box-shadow: var(--shadow-sm);
   position: relative;
   transition: var(--transition);
   text-align: right;
   border-right: 4px solid var(--primary-color);
   max-width: 400px;
 }

 .for-you-item:hover {
   transform: translateY(-5px);
   box-shadow: var(--shadow-md);
 }

 .for-you-item p {
   font-size: 20px;
   line-height: 1.5;
   margin: 0;
   padding-right: 35px;
   position: relative;
 }

 .for-you-item p::before {
   content: "✓";
   position: absolute;
   right: 0;
   top: 0;
   color: var(--primary-color);
   font-size: 24px;
   font-weight: bold;
 }

 /* Gifts Section */
 .gifts-container {
   background-color: var(--white);
   border-radius: var(--border-radius);
   padding: 40px;
   box-shadow: var(--shadow-md);
   margin: 40px 0;
   border: 2px solid var(--primary-light);
 }

 .gift-item {
   text-align: right;
   margin-bottom: 30px;
   padding-bottom: 30px;
   border-bottom: 1px dashed var(--primary-light);
 }

 .gift-item:last-child {
   margin-bottom: 0;
   padding-bottom: 0;
   border-bottom: none;
 }

 .gift-title {
   font-size: 24px;
   font-weight: 600;
   color: var(--primary-color);
   margin-bottom: 15px;
   display: flex;
   align-items: center;
 }

 .gift-title i {
   margin-left: 10px;
   color: var(--primary-color);
 }

 .gift-description {
   font-size: 18px;
   color: var(--text-light);
   line-height: 1.6;
 }

 /* FAQ Section */
 .faq-container {
   max-width: 800px;
   margin: 40px auto;
 }

 .faq-item {
   margin-bottom: 15px;
   border: 1px solid var(--primary-light);
   border-radius: var(--border-radius);
   overflow: hidden;
   background-color: var(--white);
   box-shadow: var(--shadow-sm);
   transition: var(--transition);
 }

 .faq-item:hover {
   box-shadow: var(--shadow-md);
 }

 .faq-question {
   width: 100%;
   text-align: right;
   padding: 20px;
   background-color: var(--white);
   border: none;
   outline: none;
   cursor: pointer;
   font-size: 20px;
   font-weight: 600;
   color: var(--primary-color);
   transition: var(--transition);
   display: flex;
   justify-content: space-between;
   align-items: center;
 }

 .faq-question:after {
   content: '\f107';
   font-family: 'Font Awesome 5 Free';
   font-weight: 900;
   transition: var(--transition);
 }

 .faq-question.active:after {
   transform: rotate(180deg);
 }

 .faq-question:hover {
   background-color: var(--primary-bg);
 }

 .faq-answer {
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.3s ease;
   padding: 0 20px;
 }

 .faq-answer.active {
   max-height: 230px;
   padding: 0 20px 20px;
 }

 .faq-answer p {
   margin: 0;
   font-size: 18px;
   color: var(--text-light);
 }

 /* Video Section */
 .video-section {
   background-color: var(--primary-bg);
   padding: 60px 0;
 }

 .videos-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
   gap: 30px;
   margin-bottom: 40px;
 }

 .videos-full {
   /* display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 30px; */
   margin-bottom: 40px;
 }

 .video-container {
   max-width: 800px;
   margin: 0 auto 30px;
   border-radius: var(--border-radius);
   overflow: hidden;
   box-shadow: var(--shadow-lg);
   position: relative;
 }

 .responsive-video {
   width: 100%;
   height: auto;
   display: block;
   border-radius: var(--border-radius);
 }

 .video-description {
   font-size: 18px;
   color: var(--text-light);
   line-height: 1.6;
   margin-bottom: 20px;
   max-width: 800px;
   margin-left: auto;
   margin-right: auto;
 }

 /* Feedback Section */
 .feedback {
   background-color: var(--white);
   padding: 60px 0;
 }

 .feedback-intro {
   font-size: 20px;
   color: var(--text-light);
   line-height: 1.6;
   margin-bottom: 40px;
   max-width: 800px;
   margin-left: auto;
   margin-right: auto;
 }

 .feedback-covers {
   display: flex;
   justify-content: center;
   gap: 30px;
   margin-bottom: 50px;
   flex-wrap: wrap;
 }

 .feedback-cover-item {
   max-width: 400px;
   border-radius: var(--border-radius);
   overflow: hidden;
   box-shadow: var(--shadow-md);
   transition: var(--transition);
 }

 .feedback-cover-item:hover {
   transform: translateY(-5px);
   box-shadow: var(--shadow-lg);
 }

 .feedback-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   gap: 30px;
   margin-bottom: 40px;
 }

 .feedback-item {
   background-color: var(--white);
   border-radius: var(--border-radius);
   overflow: hidden;
   box-shadow: var(--shadow-sm);
   transition: var(--transition);
 }

 .feedback-item:hover {
   transform: translateY(-5px);
   box-shadow: var(--shadow-md);
 }

 .feedback-image {
   width: 100%;
   height: auto;
 }

 .feedback-image img {
   width: 100%;
   height: auto;
   display: block;
   border-radius: var(--border-radius);
 }

 .feedback-cta-text {
   font-size: 22px;
   font-weight: 600;
   color: var(--primary-color);
   margin-bottom: 20px;
   text-align: center;
 }

 /* Payment Methods */
 .payment-methods {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
   gap: 20px;
   margin: 40px 0;
 }

 .payment-method {
   background-color: var(--white);
   border-radius: var(--border-radius);
   padding: 20px;
   box-shadow: var(--shadow-sm);
   transition: var(--transition);
   text-align: center;
 }

 .payment-method:hover {
   transform: translateY(-5px);
   box-shadow: var(--shadow-md);
 }

 .payment-icon {
   font-size: 30px;
   color: var(--primary-color);
   margin-bottom: 15px;
 }

 .payment-name {
   font-size: 18px;
   font-weight: 600;
   color: var(--text-color);
 }

 /* CTA Button */
 .btn {
   display: inline-block;
   background-color: var(--primary-color);
   color: var(--white);
   font-size: 20px;
   font-weight: 600;
   padding: 15px 30px;
   border-radius: 50px;
   border: 2px solid var(--primary-color);
   transition: var(--transition);
   text-align: center;
   margin-top: 30px;
   box-shadow: var(--shadow-sm);
   position: relative;
   overflow: hidden;
   z-index: 1;
 }

 .btn::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 0;
   height: 100%;
   /* background-color: var(--white); */
   transition: var(--transition);
   z-index: -1;
 }

 .btn:hover {
   color: var(--primary-color);
   box-shadow: var(--shadow-md);
 }

 .btn:hover::before {
   width: 100%;
 }

 .btn-large {
   padding: 18px 36px;
   font-size: 22px;
 }

 .btn-outline {
   background-color: transparent;
   color: var(--primary-color);
 }

 .btn-outline:hover {
   background-color: var(--primary-color);
   color: var(--white);
 }

 .btn-outline:hover::before {
   width: 0;
 }

 /* WhatsApp Button */
 .whatsapp {
   position: fixed;
   right: 30px;
   bottom: 30px;
   width: 60px;
   height: 60px;
   background-color: #25D366;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: var(--shadow-md);
   transition: var(--transition);
   z-index: 999;
 }

 .whatsapp:hover {
   transform: scale(1.1);
   box-shadow: var(--shadow-lg);
 }

 .whatsapp i {
   font-size: 30px;
   color: var(--white);
 }

 /* Footer */
 .footer {
   background-color: var(--primary-color);
   color: var(--white);
   padding: 60px 0 30px;
   /* margin-top: 100px; */
 }

 .footer-content {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   gap: 40px;
   margin-bottom: 40px;
 }

 .footer-column {
   flex: 1;
   min-width: 250px;
   text-align: right;
 }

 .footer-title {
   font-size: 22px;
   font-weight: 600;
   margin-bottom: 20px;
   color: var(--white);
 }

 .footer-links {
   display: flex;
   flex-direction: column;
   gap: 10px;
 }

 .footer-links a {
   color: rgba(255, 255, 255, 0.8);
   font-size: 16px;
   transition: var(--transition);
 }

 .footer-links a:hover {
   color: var(--white);
   transform: translateX(-5px);
 }

 .footer-links .footer-cta {
   color: var(--white);
   font-weight: 600;
   background-color: rgba(255, 255, 255, 0.2);
   padding: 8px 15px;
   border-radius: 50px;
   margin-top: 10px;
   display: inline-block;
 }

 .footer-links .footer-cta:hover {
   background-color: var(--white);
   color: var(--primary-color);
   transform: translateY(-3px);
 }

 .footer-contact {
   display: flex;
   flex-direction: column;
   gap: 15px;
 }

 .footer-contact-item {
   display: flex;
   align-items: center;
   gap: 10px;
   color: rgba(255, 255, 255, 0.8);
   font-size: 16px;
 }

 .footer-contact-item i {
   color: var(--white);
   font-size: 18px;
 }

 .footer-social {
   display: flex;
   gap: 15px;
   margin-top: 20px;
 }

 .footer-social a {
   width: 40px;
   height: 40px;
   background-color: rgba(255, 255, 255, 0.1);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--white);
   font-size: 18px;
   transition: var(--transition);
 }

 .footer-social a:hover {
   background-color: var(--white);
   color: var(--primary-color);
   transform: translateY(-5px);
 }

 .footer-bottom {
   border-top: 1px solid rgba(255, 255, 255, 0.1);
   padding-top: 20px;
   text-align: center;
   color: rgba(255, 255, 255, 0.6);
   font-size: 14px;
 }

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

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 @keyframes pulse {
   0% {
     transform: scale(1);
   }

   50% {
     transform: scale(1.05);
   }

   100% {
     transform: scale(1);
   }
 }

 .animate-pulse {
   animation: pulse 2s infinite;
 }

 /* Responsive Styles */
 @media (max-width: 1024px) {
   .hero-title {
     font-size: 40px;
   }

   .hero-subtitle {
     font-size: 20px;
   }

   .section-title {
     font-size: 32px;
   }

   .countdown-value {
     font-size: 50px;
   }

   .countdown-label {
     font-size: 18px;
   }
 }

 @media (max-width: 768px) {
   .nav-links {
     display: none;
   }

   .mobile-menu-btn {
     display: block;
   }

   .hero-title {
     font-size: 32px;
   }

   .hero-subtitle {
     font-size: 18px;
   }

   .section-title {
     font-size: 28px;
   }

   .countdown {
     flex-wrap: wrap;
   }

   .countdown-item {
     min-width: 80px;
     padding: 15px;
   }

   .countdown-value {
     font-size: 40px;
   }

   .countdown-label {
     font-size: 16px;
   }

   .topic-title {
     font-size: 24px;
   }

   .topic-list li {
     font-size: 16px;
   }

   .btn {
     font-size: 18px;
     padding: 12px 25px;
   }

   .btn-large {
     font-size: 20px;
     padding: 15px 30px;
   }

   .footer-content {
     flex-direction: column;
     gap: 30px;
   }
 }

 @media (max-width: 480px) {
   .hero-title {
     font-size: 28px;
   }

   .hero-subtitle {
     font-size: 16px;
   }

   .section-title {
     font-size: 24px;
   }

   .countdown-item {
     min-width: 70px;
     padding: 10px;
   }

   .countdown-value {
     font-size: 30px;
   }

   .countdown-label {
     font-size: 14px;
   }

   .btn {
     font-size: 16px;
     padding: 10px 20px;
   }

   .btn-large {
     font-size: 18px;
     padding: 12px 25px;
   }
 }

 /* Pricing Section Styles */
 .pricing-section {
   background-color: #f9f5eb;
   padding: 80px 0;
   position: relative;
   overflow: hidden;
 }

 .pricing-section .section-title {
   color: #ce902b;
   font-size: 42px;
   margin-bottom: 20px;
   text-align: center;
 }

 .pricing-section .section-title::after {
   background-color: #fcb23d;
 }

 .pricing-subtitle {
   color: #fcb23d;
   font-size: 18px;
   text-align: center;
   margin-bottom: 60px;
   max-width: 800px;
   margin-left: auto;
   margin-right: auto;
 }

 .pricing-cards {
   display: -webkit-box;
   /* Pour une meilleure compatibilité Flexbox */
   display: -ms-flexbox;
   /* Pour une meilleure compatibilité Flexbox */
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -ms-flex-direction: column;
   flex-direction: column;
   gap: 30px;
   max-width: 800px;
   margin: 0 auto;
   position: relative;
   z-index: 1;
 }

 .pricing-card {
   background-color: rgba(255, 255, 255, 0.95);
   border-radius: 20px;
   padding: 30px 20px;
   text-align: center;
   position: relative;
   -webkit-transition: all 0.3s ease;
   /* Ajout du préfixe */
   transition: all 0.3s ease;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
   border: 2px solid #fcb23d;
   width: 100%;
 }

 .pricing-card:hover {
   -webkit-transform: translateY(-10px);
   /* Ajout du préfixe */
   transform: translateY(-10px);
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
 }

 .pricing-card.crystal {
   border-top: 5px solid #fcb23d;
 }

 .pricing-card.platinum {
   border-top: 5px solid #fcb23d;
   /* -webkit-transform: scale(1.05); */
   /* transform: scale(1.05); */
 }

 .pricing-card.royal {
   border-top: 5px solid #ffd700;
   position: relative;
 }

 .pricing-card.sold-out {
   opacity: 0.7;
   -webkit-filter: grayscale(50%);
   /* Ajout du préfixe */
   filter: grayscale(50%);
 }

 .sold-out-badge {
   position: absolute;
   top: -10px;
   right: 20px;
   background: #ff4757;
   color: white;
   padding: 8px 20px;
   border-radius: 20px;
   font-weight: bold;
   font-size: 14px;
   -webkit-transform: rotate(15deg);
   /* Ajout du préfixe */
   transform: rotate(15deg);
   box-shadow: 0 4px 8px rgba(255, 71, 87, 0.3);
 }

 .card-header {
   margin-bottom: 30px;
 }

 .package-icon {
   width: 80px;
   height: 80px;
   margin: 0 auto 20px;
   background: -webkit-linear-gradient(135deg, #fcb23d 0%, #fcb23d 100%);
   /* Ajout du préfixe */
   background: linear-gradient(135deg, #fcb23d 0%, #fcb23d 100%);
   border-radius: 50%;
   display: -webkit-box;
   /* Pour une meilleure compatibilité Flexbox */
   display: -ms-flexbox;
   /* Pour une meilleure compatibilité Flexbox */
   display: flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
   font-size: 32px;
   color: white;
   box-shadow: 0 8px 16px rgba(102, 126, 234, 0.3);
 }

 .crystal .package-icon {
   background: -webkit-linear-gradient(135deg, #fcb23d 0%, #fcb23d 100%);
   /* Ajout du préfixe */
   background: linear-gradient(135deg, #fcb23d 0%, #fcb23d 100%);
 }

 .platinum .package-icon {
   background: -webkit-linear-gradient(135deg, #fcb23d 0%, #fcb23d 100%);
   /* Ajout du préfixe */
   background: linear-gradient(135deg, #fcb23d 0%, #fcb23d 100%);
 }

 .royal .package-icon {
   background: -webkit-linear-gradient(135deg, #ffd700 0%, #ffb347 100%);
   /* Ajout du préfixe */
   background: linear-gradient(135deg, #ffd700 0%, #ffb347 100%);
 }

 .package-name {
   font-size: 28px;
   font-weight: bold;
   color: #2c3e50;
   margin-bottom: 8px;
   letter-spacing: 2px;
 }

 .package-subtitle {
   color: #7f8c8d;
   font-size: 16px;
   margin-bottom: 20px;
 }

 .pricing-info {
   margin-bottom: 30px;
   padding: 20px;
   background: rgba(248, 249, 250, 0.8);
   border-radius: 15px;
 }

 .original-price {
   text-decoration: line-through;
   color: #95a5a6;
   font-size: 18px;
   margin-bottom: 5px;
 }

 .current-price {
   font-size: 36px;
   font-weight: bold;
   color: #2c3e50;
   margin-bottom: 10px;
 }

 .sold-out-price {
   color: #7f8c8d;
   font-size: 24px;
 }

 .package-type {
   color: #7f8c8d;
   font-size: 16px;
   margin-bottom: 5px;
 }

 .features-list {
   text-align: right;
   margin-bottom: 30px;
   -webkit-box-flex: 1;
   /* Ajout pour Flexbox */
   -ms-flex-positive: 1;
   /* Ajout pour Flexbox */
   flex-grow: 1;
 }

 .features-list .feature-item {
   display: -webkit-box;
   /* Pour une meilleure compatibilité Flexbox */
   display: -ms-flexbox;
   /* Pour une meilleure compatibilité Flexbox */
   display: flex;
   -webkit-box-align: start;
   -ms-flex-align: start;
   align-items: flex-start;
   margin-bottom: 15px;
   padding: 10px;
   background: rgba(248, 249, 250, 0.5);
   border-radius: 8px;
   -webkit-transition: all 0.2s ease;
   /* Ajout du préfixe */
   transition: all 0.2s ease;
 }

 .features-list .feature-item:hover {
   background: rgba(206, 144, 43, 0.1);
 }

 .features-list .feature-item i {
   color: #27ae60;
   margin-left: 12px;
   margin-top: 2px;
   -ms-flex-negative: 0;
   /* Ajout pour Flexbox */
   flex-shrink: 0;
 }

 .features-list .feature-item span {
   color: #2c3e50;
   font-size: 20px;
   line-height: 1.5;
 }

 .features-list .feature-item.disabled {
   opacity: 0.5;
   background: rgba(248, 249, 250, 0.3);
 }

 .features-list .feature-item.disabled i {
   color: #e74c3c;
 }

 .features-list .feature-item.disabled span {
   color: #7f8c8d;
   text-decoration: line-through;
 }

 .pricing-section .payment-methods {
   display: -webkit-box;
   /* Pour une meilleure compatibilité Flexbox */
   display: -ms-flexbox;
   /* Pour une meilleure compatibilité Flexbox */
   display: flex;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
   gap: 10px;
   margin-bottom: 30px;
   -ms-flex-wrap: wrap;
   /* Ajout pour Flexbox */
   flex-wrap: wrap;
 }

 .pricing-section .payment-methods img {
   width: 40px;
   height: 25px;
   border-radius: 4px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }

 .cta-button-style,
 .cta-button {
   width: 100%;
   padding: 15px 30px;
   border: none;
   border-radius: 50px;
   font-size: 18px;
   font-weight: bold;
   cursor: pointer;
   -webkit-transition: all 0.3s ease;
   /* Ajout du préfixe */
   transition: all 0.3s ease;
   text-transform: uppercase;
   letter-spacing: 1px;
   position: relative;
   overflow: hidden;
 }

 .crystal-btn {
   background: red;
   color: white;
   box-shadow: 0 4px 15px rgba(74, 144, 226, 0.4);
   font-size: 32px;
   font-weight: bold;
 }

 .crystal-btn:hover {
   -webkit-transform: translateY(-2px);
   /* Ajout du préfixe */
   transform: translateY(-2px);
   box-shadow: 0 6px 20px rgba(74, 144, 226, 0.6);
 }

 .platinum-btn {
   background: red;
   color: white;
   box-shadow: 0 4px 15px rgba(123, 104, 238, 0.4);
   font-size: 32px;
   font-weight: bold;
 }

 .platinum-btn:hover {
   -webkit-transform: translateY(-2px);
   /* Ajout du préfixe */
   transform: translateY(-2px);
   box-shadow: 0 6px 20px rgba(123, 104, 238, 0.6);
 }

 .royal-btn {
   background: -webkit-linear-gradient(135deg, #ffd700 0%, #ffb347 100%);
   /* Ajout du préfixe */
   background: linear-gradient(135deg, #ffd700 0%, #ffb347 100%);
   color: #2c3e50;
   box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
 }

 .royal-btn:hover:not(.disabled) {
   -webkit-transform: translateY(-2px);
   /* Ajout du préfixe */
   transform: translateY(-2px);
   box-shadow: 0 6px 20px rgba(255, 215, 0, 0.6);
 }

 .royal-btn.disabled {
   opacity: 0.6;
   cursor: not-allowed;
   background: #95a5a6;
   color: white;
 }



 .bold {
  font-weight: bold;
  font-size: 30px;
  /* color: red!important; */
}

.important *,
.important {
  font-weight: bold;
  color: var(--primary-color) !important;
  font-size: 26px;
}

.color-important {
  color: red !important;
}

a.btn {
  color: #fff !important;
  background-color: red;
  font-size: 32px;
  font-weight: bold;
}

.red-bold {
  color: red !important;
  font-weight: bold;
}

.border-red {
  border: 2px solid red;
  padding: 20px;
}

/* Popup Styles */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 999999999;
  overflow: auto;
}

.popup-content {
  background-color: #fff;
  /* padding: 30px; */
  /* border-radius: 10px; */
  width: 100vw;
  max-width: 600px;
  text-align: center;
  position: relative;
  overflow: auto;
  height: 100dvh;
}

.popup-close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  cursor: pointer;
}

.popup-option {
  border: 3px solid red;
  padding: 20px;
  margin-bottom: 15px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.popup-option:hover {
  background-color: #ce902b;
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.popup-option:hover h3,
.popup-option:hover .price,
.popup-option:hover p {
  color: #fff;
}

.popup-option h3 {
  margin-top: 0;
  color: #ce902b;
  font-size: 25px;
  font-weight: 700;
}

.popup-option .price {
  font-size: 24px;
  font-weight: bold;
  color: #d9534f;
  margin-bottom: 10px;
}

.popup-option p {
  text-align: right;
  margin: 5px 0;
}
.red{
  color: red;
}
.title-poup{
  margin-bottom: 20px;
}

/* New Options Section Styles */
.options-container {
  display: flex;
  justify-content: space-around;
  gap: 20px;
  flex-wrap: wrap;
}

.option-card {
  background-color: #f9f9f9;
  border: 2px solid #ce902b;
  border-radius: 10px;
  padding: 20px;
  width: 45%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: right;
}

.option-card h3 {
  color: #ce902b;
  font-size: 22px;
}

.option-card .price {
  font-size: 28px;
  font-weight: bold;
  color: #d9534f;
  margin-bottom: 15px;
}

.option-card ul {
  list-style: none;
  padding: 0;
  margin-bottom: 20px;
}

.option-card ul li {
  margin-bottom: 10px;
}

.option-card .btn {
  display: block;
  text-align: center;
}