.hero-rules-grid {
     display: grid;
     grid-template-columns: 1fr 2fr;
     gap: 2rem;
     align-items: start;
     margin: 2rem 0;
 }

 /* Make hero-container-left sticky */
 .hero-container-left {
     position: sticky;
     top: 50px;
     background: white;
 }



 h1,
 h2,
 h3 {
     font-family: var(--head-font);
     color: var(--brown);
 }

 .terms-section {
     padding: 60px 20px;
 }

 .terms-section h1 {
     font-size: 2.1rem;
     margin-bottom: 60px;
     font-weight: bold;
     text-align: center;
     color: var(--dark-brown);
 }

 .terms-section h2 {
     font-size: 1.3rem;
     margin-top: 40px;
     margin-bottom: 20px;
     color: var(--brown);
     font-weight: 600;
     border-bottom: 2px solid var(--yellow);
     padding-bottom: 10px;
 }

 .terms-section p,
 .terms-section li {
     font-size: 1rem;
     color: var(--dark-brown);
 }

 .terms-section ul {
     list-style-type: disc;
     padding-left: 20px;
 }

 .terms-section ul li {
     margin-bottom: 10px;
 }

 .terms-section table {
     width: 100%;
     margin: 20px 0;
     border-collapse: collapse;
     background-color: #fff;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }

 .terms-section table th,
 .terms-section table td {
     padding: 15px;
     text-align: left;
     border-bottom: 1px solid var(--light-brown);
 }

 .terms-section table th {
     background-color: var(--brown);
     color: #fff;
 }

 .terms-section .highlight {
     color: var(--yellow);
     font-weight: bold;
 }

 .terms-section .note {
     background-color: var(--yellow);
     padding: 15px;
     border-radius: 5px;
     margin-top: 20px;
     font-style: italic;
     color: #fff;
 }

 .terms-checkbox {
     margin: 30px 0;
     display: flex;
     align-items: center;
     font-family: var(--body-font);
     font-size: 1.1rem;
     color: var(--dark-brown);
 }

 .terms-checkbox input {
     margin-right: 10px;
     width: 20px;
     height: 20px;
     accent-color: var(--yellow);
 }

 .register-btn-final {
     background-color: var(--yellow);
     cursor: pointer;
     padding: 10px 20px;
     border-radius: 10px;
     transition: all 0.3s ease-in-out;
     text-decoration: none;
     font-weight: 600;
     color: #fff !important;
     display: block;
     border: none;
     margin: 0 auto;
     margin-top: 10px;
 }

 .register-btn-final:hover {
     background-color: var(--yellow);
 }

 .register-btn-final:disabled {
     background-color: var(--light-brown) !important;

 }



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

     .terms-section h2 {
         font-size: 1.5rem;
     }

     .terms-section p,
     .terms-section li {
         font-size: 1rem;
     }
 }


 /* Responsive: stack in one column on small screens */
 @media (max-width: 768px) {
     .hero-rules-grid {
         grid-template-columns: 1fr;
     }

     .hero-container-left {
         position: static;
         /* No sticky on small screens */
         margin-bottom: 2rem;
     }
 }