:root {
           --primary-color: #28a745;
           --dark-blue: #2c3e50;
           --light-bg: #f0f7f4;
           --white: #ffffff;
           --gray: #6c757d;
       }       
       .coming-soon {
           text-align: center;
           padding: 100px 20px;
           min-height: calc(100vh - 200px);
           display: flex;
           flex-direction: column;
           justify-content: center;
           align-items: center;
       }

       .coming-soon h2 {
           font-size: 2.5rem;
           margin-bottom: 20px;
           color: var(--dark-blue);
       }

       .coming-soon p {
           font-size: 1.2rem;
           max-width: 600px;
           margin: 0 auto 30px;
           color: var(--gray);
       }

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

       .countdown-item {
           margin: 0 15px;
           background-color: var(--white);
           border-radius: 8px;
           padding: 15px;
           min-width: 80px;
           box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
       }

       .countdown-item .number {
           font-size: 2rem;
           font-weight: bold;
           color: var(--primary-color);
       }

       .countdown-item .text {
           font-size: 0.9rem;
           color: var(--gray);
       }

       .cta-buttons {
           margin-top: 40px;
           display: flex;
           flex-wrap: wrap;
           justify-content: center;
           gap: 15px;
       }

       .secondary-btn {
           background-color: transparent;
           color: var(--primary-color);
           border: 2px solid var(--primary-color);
           padding: 8px 15px;
           border-radius: 4px;
           text-decoration: none;
           font-weight: 500;
           transition: all 0.3s;
       }

       .secondary-btn:hover {
           background-color: var(--primary-color);
           color: var(--white);
       }
       .notification {
           background-color: #ffeeba;
           color: #856404;
           padding: 15px;
           border-radius: 5px;
           margin-top: 30px;
           text-align: center;
           max-width: 600px;
       }

       @media screen and (max-width: 768px) {
          

           .coming-soon h2 {
               font-size: 2rem;
           }

           .countdown-item {
               margin: 10px;
           }
       }

       @media screen and (max-width: 480px) {
           
           .coming-soon h2 {
               font-size: 1.8rem;
           }

           .coming-soon p {
               font-size: 1rem;
           }

           .countdown {
               flex-wrap: wrap;
           }

           .countdown-item {
               margin: 5px;
               min-width: 70px;
           }

           .cta-buttons {
               flex-direction: column;
               align-items: center;
           }

           .btn,
           .secondary-btn {
               width: 100%;
               text-align: center;
               margin-bottom: 10px;
           }
       }