/* style/index.css */
.page-index {
     font-family: 'Arial', sans-serif;
     color: #333;
     line-height: 1.6;
   }
   
   .page-index__container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 20px;
   }
   
   .page-index__hero-section {
     background: linear-gradient(135deg, #0A2239 0%, #30475E 100%); /* Dark blue gradient */
     color: #fff;
     padding: 100px 0;
     text-align: center;
   }
   
   .page-index__hero-title {
     font-size: 3.5em;
     margin-bottom: 20px;
     color: #E0B400; /* Accent gold for title */
     line-height: 1.2;
   }
   
   .page-index__hero-subtitle {
     font-size: 1.3em;
     margin-bottom: 40px;
     max-width: 800px;
     margin-left: auto;
     margin-right: auto;
   }
   
   .page-index__btn {
     display: inline-block;
     padding: 15px 30px;
     border-radius: 8px;
     text-decoration: none;
     font-weight: bold;
     transition: all 0.3s ease;
     cursor: pointer;
     font-size: 1.1em;
   }
   
   .page-index__btn--primary {
     background-color: #E0B400; /* Accent gold */
     color: #0A2239; /* Dark blue text */
     border: 2px solid #E0B400;
   }
   
   .page-index__btn--primary:hover {
     background-color: #f5c700;
     border-color: #f5c700;
     transform: translateY(-2px);
   }
   
   .page-index__btn--outline {
     background-color: transparent;
     color: #E0B400; /* Accent gold text */
     border: 2px solid #E0B400;
   }
   
   .page-index__btn--outline:hover {
     background-color: #E0B400;
     color: #0A2239;
     transform: translateY(-2px);
   }
   
   .page-index__content-section {
     padding: 80px 0;
     background-color: #f9f9f9;
   }
   
   .page-index__section--dark {
     background-color: #0A2239;
     color: #fff;
   }
   
   .page-index__section-title {
     font-size: 2.8em;
     text-align: center;
     margin-bottom: 60px;
     color: #0A2239;
   }
   
   .page-index__section--dark .page-index__section-title {
     color: #E0B400;
   }
   
   .page-index__intro-text {
     font-size: 1.1em;
     text-align: center;
     max-width: 900px;
     margin: -40px auto 60px auto;
     color: #555;
   }
   
   .page-index__section--dark .page-index__intro-text {
     color: #ccc;
   }
   
   .page-index__feature-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 30px;
     text-align: center;
   }
   
   .page-index__feature-item {
     background-color: rgba(255, 255, 255, 0.05);
     padding: 30px;
     border-radius: 10px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
     transition: transform 0.3s ease;
   }
   
   .page-index__feature-item:hover {
     transform: translateY(-10px);
   }
   
   .page-index__feature-icon {
     width: 60px;
     height: 60px;
     margin-bottom: 20px;
     filter: invert(1) brightness(1.5) sepia(1) hue-rotate(20deg) saturate(5); /* Make icons gold */
   }
   
   .page-index__feature-heading {
     font-size: 1.5em;
     color: #E0B400;
     margin-bottom: 15px;
   }
   
   .page-index__feature-item p {
     color: #f0f0f0;
     font-size: 0.95em;
   }
   
   .page-index__promo-category {
     margin-bottom: 60px;
     background-color: #fff;
     padding: 40px;
     border-radius: 10px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
   }
   
   .page-index__promo-heading {
     font-size: 2.2em;
     color: #0A2239;
     margin-bottom: 30px;
     text-align: center;
   }
   
   .page-index__promo-item {
     display: flex;
     align-items: center;
     gap: 40px;
     margin-bottom: 40px;
   }
   
   .page-index__promo-item:nth-child(even) {
     flex-direction: row-reverse;
   }
   
   .page-index__promo-image {
     width: 40%;
     max-width: 400px;
     height: auto;
     border-radius: 8px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   }
   
   .page-index__promo-details {
     width: 60%;
   }
   
   .page-index__promo-details p {
     margin-bottom: 15px;
     color: #444;
   }
   
   .page-index__promo-details ul {
     list-style: disc inside;
     margin-bottom: 20px;
     padding-left: 20px;
     color: #444;
   }
   
   .page-index__promo-details ul li {
     margin-bottom: 8px;
   }
   
   .page-index__promo-details a {
     color: #E0B400;
     text-decoration: underline;
   }
   
   .page-index__guide-steps {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 30px;
   }
   
   .page-index__guide-item {
     background-color: rgba(255, 255, 255, 0.05);
     padding: 30px;
     border-radius: 10px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
   }
   
   .page-index__guide-heading {
     font-size: 1.8em;
     color: #E0B400;
     margin-bottom: 20px;
   }
   
   .page-index__guide-item p, .page-index__guide-item li {
     color: #f0f0f0;
     font-size: 0.95em;
   }
   
   .page-index__guide-item ol, .page-index__guide-item ul {
     list-style-position: inside;
     margin-bottom: 20px;
     padding-left: 0;
   }
   
   .page-index__guide-item a {
     color: #E0B400;
     text-decoration: underline;
   }
   
   .page-index__app-download {
     display: flex;
     align-items: center;
     gap: 40px;
     background-color: #fff;
     padding: 40px;
     border-radius: 10px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
   }
   
   .page-index__app-image {
     width: 40%;
     max-width: 400px;
     height: auto;
     border-radius: 8px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   }
   
   .page-index__app-details {
     width: 60%;
   }
   
   .page-index__app-details p {
     margin-bottom: 15px;
     color: #444;
   }
   
   .page-index__app-details ul {
     list-style: disc inside;
     margin-bottom: 20px;
     padding-left: 20px;
     color: #444;
   }
   
   .page-index__responsible-gambling {
     display: flex;
     align-items: center;
     gap: 40px;
   }
   
   .page-index__responsible-gambling-image {
     width: 40%;
     max-width: 400px;
     height: auto;
     border-radius: 8px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   }
   
   .page-index__responsible-gambling-details {
     width: 60%;
   }
   
   .page-index__responsible-gambling-details p {
     margin-bottom: 15px;
     color: #f0f0f0;
   }
   
   .page-index__responsible-gambling-details ul {
     list-style: disc inside;
     margin-bottom: 20px;
     padding-left: 20px;
     color: #f0f0f0;
   }
   
   .page-index__responsible-gambling-details a {
     color: #E0B400;
     text-decoration: underline;
   }
   
   .page-index__faq-list {
     margin-top: 40px;
   }
   
   .page-index__faq-item {
     background-color: #fff;
     border: 1px solid #eee;
     border-radius: 8px;
     margin-bottom: 15px;
     padding: 25px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
   }
   
   .page-index__faq-question {
     font-size: 1.3em;
     color: #0A2239;
     margin-bottom: 10px;
     cursor: pointer;
     position: relative;
     padding-right: 30px;
   }
   
   .page-index__faq-question::after {
     content: '+';
     position: absolute;
     right: 0;
     top: 0;
     font-size: 1.2em;
     color: #E0B400;
   }
   
   .page-index__faq-question.active::after {
     content: '-';
   }
   
   .page-index__faq-answer {
     font-size: 1em;
     color: #555;
     display: none;
     padding-top: 10px;
     border-top: 1px solid #eee;
     margin-top: 15px;
   }
   
   .page-index__faq-answer.active {
     display: block;
   }
   
   .page-index__cta-section {
     background: linear-gradient(135deg, #E0B400 0%, #f5c700 100%); /* Gold gradient */
     color: #0A2239;
     padding: 80px 0;
     text-align: center;
   }
   
   .page-index__cta-title {
     font-size: 3em;
     margin-bottom: 20px;
     color: #0A2239;
   }
   
   .page-index__cta-text {
     font-size: 1.2em;
     margin-bottom: 40px;
     max-width: 900px;
     margin-left: auto;
     margin-right: auto;
     color: #333;
   }
   
   /* Responsive Design */
   @media (max-width: 992px) {
     .page-index__hero-title {
       font-size: 2.8em;
     }
     .page-index__promo-item,
     .page-index__app-download,
     .page-index__responsible-gambling {
       flex-direction: column;
       text-align: center;
     }
     .page-index__promo-image,
     .page-index__promo-details,
     .page-index__app-image,
     .page-index__app-details,
     .page-index__responsible-gambling-image,
     .page-index__responsible-gambling-details {
       width: 100%;
     }
     .page-index__promo-item:nth-child(even) {
       flex-direction: column;
     }
   }
   
   @media (max-width: 768px) {
     .page-index__hero-section {
       padding: 80px 0;
     }
     .page-index__hero-title {
       font-size: 2.2em;
     }
     .page-index__hero-subtitle {
       font-size: 1.1em;
     }
     .page-index__section-title {
       font-size: 2em;
     }
     .page-index__promo-heading {
       font-size: 1.8em;
     }
     .page-index__cta-title {
       font-size: 2.5em;
     }
     .page-index__feature-grid {
       grid-template-columns: 1fr;
     }
   }
   
   @media (max-width: 480px) {
     .page-index__hero-section {
       padding: 60px 0;
     }
     .page-index__hero-title {
       font-size: 1.8em;
     }
     .page-index__hero-subtitle {
       font-size: 1em;
     }
     .page-index__btn {
       padding: 12px 25px;
       font-size: 1em;
     }
     .page-index__section-title {
       font-size: 1.8em;
       margin-bottom: 40px;
     }
     .page-index__intro-text {
       font-size: 1em;
     }
     .page-index__promo-heading {
       font-size: 1.6em;
     }
     .page-index__cta-title {
       font-size: 2em;
     }
     .page-index__cta-text {
       font-size: 1em;
     }
     .page-index__faq-question {
       font-size: 1.1em;
     }
     .page-index__faq-answer {
       font-size: 0.95em;
     }
   }