:root {
     --primary: #1a237e;
     --secondary: #d32f2f;
     --accent: #ffc107;
     --text-dark: #2d3436;
     --bg-light: #f8f9fa;
 }

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 body {
     background: white;
     color: var(--text-dark);
     line-height: 1.6;
 }

 .container {
     width: 90%;
     max-width: 1100px;
     margin: auto;
 }


 header {
     background: #fff;
     padding: 15px 0;
     border-bottom: 1px solid #eee;
     position: sticky;
     top: 0;
     z-index: 100;
 }

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

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

 .logo {
     font-size: 24px;
     font-weight: 700;
     color: var(--primary);
     display: flex;
     align-items: left;
 }

 .logo span {
     color: var(--secondary);
 }

 .phone {
     font-weight: 600;
     color: var(--primary);
 }


 .hero {
     padding: 20px 0 60px;
     text-align: center;
 }

 .hero h1 {
     font-size: 2.8rem;
     color: var(--primary);
     margin-bottom: 15px;
 }

 .hero p {
     font-size: 1.3rem;
     margin-bottom: 30px;
     color: #555;
 }


 .image-box {
     position: relative;
     width: 100%;
     border-radius: 12px;
     overflow: hidden;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
     margin-bottom: 40px;
 }

 .image-box img {
     display: block;
     width: 100%;
     height: auto;
     border: none;
 }

 /* Buttons */
 .btn-main {
     background: var(--secondary);
     color: white;
     padding: 18px 45px;
     font-size: 1.6rem;
     font-weight: 700;
     text-decoration: none;
     border-radius: 50px;
     display: inline-block;
     transition: 0.3s;
     box-shadow: 0 10px 20px rgba(211, 47, 47, 0.3);
 }

 .btn-main:hover {
     transform: translateY(-3px);
     box-shadow: 0 15px 25px rgba(211, 47, 47, 0.4);
 }

 /* Sections */
 section {
     padding: 80px 0;
 }

 .bg-gray {
     background: var(--bg-light);
 }

 h2.section-title {
     font-size: 2.2rem;
     color: var(--primary);
     margin-bottom: 40px;
     border-left: 6px solid var(--secondary);
     padding-left: 15px;
 }

 /* Features Grid */
 .grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 20px;
 }

 .card {
     background: white;
     padding: 25px;
     border-radius: 10px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
 }

 .card h3 {
     color: var(--secondary);
     margin-bottom: 15px;
 }

 /* Hero Grid Desktop: 1 Row (6 Columns) */
 @media (min-width: 769px) {
     .grid.hero-grid {
         grid-template-columns: repeat(6, 1fr);
         gap: 10px;
     }

     .hero-grid .card {
         padding: 15px 5px;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         min-height: 100px;
     }

     .hero-grid .card h3 {
         font-size: 1rem;
         margin-bottom: 0;
         line-height: 1.3;
     }

     /* 3-Column Grid Override for Desktop */
     .grid.hero-grid.three-col {
         grid-template-columns: repeat(3, 1fr);
         gap: 30px;
     }

     .grid.hero-grid.three-col .card {
         min-height: 160px;
         padding: 30px;
     }

     .grid.hero-grid.three-col .card h3 {
         font-size: 1.5rem;
     }

     /* 4-Column Grid Override for Desktop */
     .grid.hero-grid.four-col {
         grid-template-columns: repeat(4, 1fr);
         gap: 20px;
     }

     .grid.hero-grid.four-col .card {
         min-height: 160px;
         padding: 20px;
     }

     .grid.hero-grid.four-col .card h3 {
         font-size: 1.3rem;
     }
 }

 /* Countdown */
 .timer-box {
     background: var(--primary);
     color: white;
     padding: 40px;
     border-radius: 15px;
     text-align: center;
     margin-top: 40px;
 }

 .timer {
     display: flex;
     justify-content: center;
     gap: 20px;
     font-size: 2rem;
     font-weight: 700;
     margin: 20px 0;
 }

 .timer span {
     display: block;
     font-size: 0.9rem;
     font-weight: 400;
     opacity: 0.8;
 }

 /* FAQ */
 .faq-item {
     background: white;
     margin-bottom: 10px;
     padding: 20px;
     border-radius: 8px;
     border: 1px solid #ddd;
 }

 .faq-q {
     font-weight: 700;
     color: var(--primary);
     font-size: 1.1rem;
     cursor: pointer;
     position: relative;
 }

 .faq-q::after {
     content: '+';
     position: absolute;
     right: 0;
     top: 0;
     font-size: 1.2rem;
     color: var(--primary);
     transition: transform 0.3s ease;
 }

 .faq-q.active::after {
     content: '-';
 }

 .faq-a {
     margin-top: 10px;
     color: #666;
     display: none;
     transition: all 0.3s ease;
 }

 /* Pricing */
 .pricing-card {
     border: 2px solid var(--primary);
     padding: 40px;
     border-radius: 20px;
     text-align: center;
     max-width: 500px;
     margin: auto;
 }

 .old-p {
     text-decoration: line-through;
     color: #999;
     font-size: 1.5rem;
 }

 .new-p {
     font-size: 3.5rem;
     color: var(--secondary);
     font-weight: 800;
 }

 footer {
     background: #111;
     color: #ccc;
     padding: 60px 0 20px;
     font-size: 0.9rem;
 }

 @media (max-width: 768px) {
     .hero h1 {
         font-size: 2rem;
     }

     .btn-main {
         font-size: 1.2rem;
         padding: 15px 30px;
     }

     section {
         padding: 30px 0;
     }

     .hero {
         padding: 30px 0;
     }

     h2.section-title {
         font-size: 1.8rem;
         margin-bottom: 20px;
     }

     .timer-box {
         padding: 25px;
         margin-top: 20px;
     }

     .image-box {
         margin-bottom: 20px;
     }

     .hero p {
         margin-bottom: 15px;
     }

     /* FAQ Icon Alignment */
     .faq-q {
         padding-right: 30px;
     }

     .faq-q::after {
         top: 50%;
         transform: translateY(-50%);
     }

     /* Hero Grid Mobile: 2 Rows, 3 Columns */
     .grid.hero-grid {
         grid-template-columns: repeat(3, 1fr);
         gap: 10px;
     }

     .hero-grid .card {
         padding: 10px 5px;
         min-height: 80px;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
     }

     .hero-grid .card h3 {
         font-size: 0.85rem;
         margin-bottom: 0;
         line-height: 1.2;
     }

     .grid.hero-grid.four-col {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 /* Sticky CTA */
 .mobile-sticky-cta {
     display: block;
     position: fixed;
     bottom: 0;
     left: 0;
     width: 100%;
     background: transparent;
     padding: 10px 20px;
     box-shadow: none;
     z-index: 9999;
     text-align: center;
     pointer-events: none;
     transition: opacity 0.3s ease;
     /* just for hide/show fade */
     opacity: 1;
     /* visible by default */
 }

 /* Hidden state - only for JS to toggle */
 .mobile-sticky-cta.hidden {
     opacity: 0;
     pointer-events: none;
 }

 /* Keep the button exactly the same as before */
 .mobile-sticky-cta .btn-main {
     pointer-events: auto;
 }

 /* Maintain body padding so button doesn't overlap content */
 body {
     padding-bottom: 100px;
 }

 /* Mobile adjustments */
 @media (max-width: 768px) {
     body {
         padding-bottom: 80px;
     }
 }


 /* Reduce gap between timer and pricing */
 .timer-section {
     padding-bottom: 20px !important;
 }

 .pricing {
     padding-top: 20px !important;
 }

 .pricing-wrapper {
     margin-top: 20px !important;
 }

 /* Reduce gap between FAQ and Timer */
 .faq-section {
     padding-bottom: 0 !important;
 }

 .timer-section {
     padding-top: 0 !important;
 }


 /* General Styles */
 @font-face {
     font-family: 'Avenir';
     src: url('font/avenir_roman_12.otf') format('opentype');
     font-weight: normal;
     font-style: normal;
 }

 body {
     font-family: 'Avenir', sans-serif;
     margin: 0;
     padding: 0;
     line-height: 1.6;
     background-color: #f9f9f9;
     color: #333;
     scroll-behavior: smooth;
 }

 button,
 input,
 textarea,
 select {
     font-family: 'Avenir', sans-serif;
 }

 .container {
     width: 90%;
     max-width: 1100px;
     /* Increased slightly for 3 cards */
     margin: auto;
 }

 /* Navbar */
 .navbar {
     background: #fff;
     padding: 15px 0;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
     position: sticky;
     top: 0;
     z-index: 1000;
 }

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

 .logo {
     font-size: 24px;
     font-weight: bold;
     color: #d32f2f;
 }

 /* Hero Section */
 .hero {
     padding: 20px 0 60px;
     text-align: center;
     background: #fff;
 }

 .main-title {
     font-size: 2.5 rem;
     color: #1a237e;
     margin-bottom: 10px;
 }

 .subtitle {
     font-size: 1.2rem;
     margin-bottom: 30px;
 }

 /* Image/Video Container updated for your Dashboard Screenshot */
 .video-container {
     position: relative;
     max-width: 800px;
     margin: 0 auto 15px auto;
     border-radius: 12px;
     overflow: hidden;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
     border: 1px solid #eee;
     margin-bottom: 20px;
 }

 .video-container img,
 .video-container iframe {
     display: block;
     width: 100%;
     height: auto;
 }

 .video-container iframe {
     aspect-ratio: 16 / 9;
 }

 .cta-button {
     background: #d32f2f;
     color: #fff;
     padding: 18px 45px;
     font-size: 1.5rem;
     text-decoration: none;
     border-radius: 50px;
     display: inline-block;
     font-weight: bold;
     transition: all 0.3s ease;
     box-shadow: 0 10px 20px rgba(211, 47, 47, 0.2);
 }

 .cta-button:hover {
     transform: translateY(-3px);
     box-shadow: 0 15px 25px rgba(211, 47, 47, 0.3);
 }

 /* --- UNIFORM PRICING CARD DESIGN --- */

 .pricing {
     padding: 80px 0;
 }

 .pricing-wrapper {
     display: flex !important;
     justify-content: center;
     align-items: stretch;
     /* This ensures all cards are the same height */
     gap: 25px;
     margin-top: 50px;
     flex-wrap: wrap;
 }

 .price-card {
     background: #ffffff;
     color: var(--text-dark);
     padding: 45px 30px;
     border-radius: 20px;
     flex: 1;
     min-width: 300px;
     max-width: 360px;
     text-align: center;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     /* Pushes the button to the bottom */
     border: 2px solid #e0e0e0;
     transition: all 0.3s ease;
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
 }

 /* Hover effect remains uniform for all cards */
 .price-card:hover {
     transform: translateY(-8px);
     border-color: var(--primary);
     box-shadow: 0 15px 30px rgba(26, 35, 126, 0.1);
 }

 /* Header within card */
 .price-card h2 {
     font-size: 1.8rem;
     font-weight: 700;
     margin-bottom: 15px;
     color: var(--primary);
 }

 /* Pricing Typography */
 .old-price {
     text-decoration: line-through;
     color: #999;
     font-size: 2rem;
     display: block;
 }

 .new-price {
     font-size: 2.7rem;
     font-weight: 800;
     color: var(--secondary);
     /* Highlighting price in red for all */
     display: block;
     margin-bottom: 20px;
 }

 /* Feature List (Uniform) */
 .features-list {
     list-style: none;
     text-align: left;
     margin: 20px 0;
     padding: 0;
     flex-grow: 1;
     /* Pushes content so buttons align */
 }

 .features-list li {
     padding: 8px 0 8px 25px;
     position: relative;
     font-size: 0.95rem;
     border-bottom: 1px solid #f0f0f0;
 }

 .features-list li::before {
     content: "✓";
     position: absolute;
     left: 0;
     color: #2ecc71;
     font-weight: bold;
 }

 /* Button (Uniform) */
 .enroll-now {
     background: var(--primary);
     color: white;
     border: none;
     padding: 15px;
     font-weight: 700;
     font-size: 1.1rem;
     border-radius: 10px;
     cursor: pointer;
     width: 100%;
     margin-top: 25px;
     transition: 0.3s;
 }

 .enroll-now:hover {
     background: #0d1442;
     transform: scale(1.02);
 }

 /* Add-ons Section */
 .addons {
     padding: 60px 0;
 }

 .addons-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 15px;
     margin-top: 30px;
 }

 .addon-item {
     background: white;
     padding: 20px;
     border-radius: 8px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
     text-align: start;
     font-size: 0.95rem;
     color: #333;
     border-left: 4px solid #d32f2f;
     display: flex;
     align-items: center;
     justify-content: flex-start;
     min-height: 80px;
 }

 /* Bento Grid Layout */
 .addon-item:nth-child(1) {
     grid-column: span 2;
 }

 .addon-item:nth-child(2) {
     grid-column: span 2;
 }

 .addon-item:nth-child(3) {
     grid-column: span 2;
 }

 .addon-item:nth-child(4) {
     grid-column: span 2;
 }

 .addon-item:nth-child(5) {
     grid-column: span 2;
 }

 /* Testimonials Section */
 .testimonials {
     padding: 60px 0;
     background: #fff;
     overflow: hidden;
 }

 .testimonial-slider {
     width: 100%;
     overflow: hidden;
     position: relative;
     padding: 20px 0;
     max-width: 700px;
     margin: 0 auto;
 }

 .testimonial-track {
     display: flex;
     width: 100%;
     transition: transform 0.5s ease-in-out;
 }

 .testimonial-card {
     background: #f8f9fa;
     padding: 30px;
     border-radius: 15px;
     width: 100%;
     flex-shrink: 0;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
     border-left: 5px solid var(--secondary);
     margin-right: 0;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     margin-bottom: -20px;
 }

 .testimonial-text {
     font-size: 1.1rem;
     font-style: italic;
     text-align: center;
     margin-bottom: 20px;
     color: #555;
     line-height: 1.6;
 }

 .testimonial-author {
     font-weight: bold;
     color: var(--primary);
     text-align: right;
     font-size: 1rem;
 }

 .testimonial-role {
     font-size: 0.85rem;
     color: #777;
     text-align: right;
     font-weight: normal;
     display: block;
 }

 /* Slider Buttons */
 .slider-btn {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     background: transparent;
     color: var(--primary);
     border: none;
     width: 40px;
     height: 40px;
     border-radius: 50%;
     cursor: pointer;
     z-index: 10;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 2rem;
     transition: 0.3s;
 }

 .slider-btn:hover {
     background: transparent;
     color: var(--secondary);
 }

 .prev-btn {
     left: 10px;
 }

 .next-btn {
     right: 10px;
 }

 /* Responsive Stacking */
 @media (max-width: 768px) {
     .pricing-wrapper {
         flex-direction: column;
         align-items: center;
     }

     .price-card {
         width: 100%;
         max-width: 400px;
     }
 }

 /* Mobile Responsive Adjustments */
 @media (max-width: 768px) {
     .pricing-wrapper {
         flex-direction: column;
         align-items: center;
     }

     .price-card.featured {
         transform: scale(1);
     }

     .main-title {
         font-size: 2rem;
     }

     .pricing,
     .addons {
         padding: 30px 0;
     }

     .testimonial-card {
         padding: 20px;
     }
 }

 /* Contact Form Styles */
 .form-wrapper {
     max-width: 600px;
     margin: 0 auto;
     background: #fff;
     padding: 40px;
     border-radius: 15px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
     border-top: 5px solid var(--secondary);
 }

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

 .form-group label {
     display: block;
     margin-bottom: 8px;
     font-weight: bold;
     color: var(--primary);
 }

 .form-group input,
 .form-group textarea {
     width: 100%;
     padding: 12px;
     border: 2px solid #eee;
     border-radius: 8px;
     font-size: 1rem;
     transition: 0.3s;
     box-sizing: border-box;
 }

 .form-group input:focus,
 .form-group textarea:focus {
     border-color: var(--primary);
     outline: none;
 }