:root {
     --primary-blue: rgb(70, 121, 193);
     --dark-blue: rgb(24, 33, 109);
     --light-text: rgb(244, 244, 244);
     --accent-pink: rgb(233, 155, 193);
     --accent-yellow: rgb(203, 167, 55);
     --background-beige: rgb(238, 213, 240);
 }

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

 ul {
     list-style: none;
     display: flex;
     justify-content: center;
 }

 body {
     /* font-family: "Exo", sans-serif; */
     font-family: "Quicksand", sans-serif;
     font-size: 18px;
     background-color: var(--background-beige);
     min-height: 100vh;
     position: relative;
     overflow-x: hidden;
 }


 .container {
     max-width: 800px;
     margin: 0 auto;
     padding: 40px 20px;
 }

 .logo-section {
     font-family: "Quicksand", sans-serif;
     background: rgba(255, 255, 255);
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 30px 10px;
     gap: 40px;
 }

 .contact-section {
     background: rgba(255, 255, 255);
     padding: 30px 20px;
     color: var(--dark-blue);
 }

 .contact-section h2 {
     font-size: 3rem;
     font-weight: bold;
     color: var(--primary-blue);
     margin-bottom: 40px;
     text-align: center;
     letter-spacing: 1px;
     text-transform: uppercase;
 }


 .flex-container {
     display: flex;
     gap: 30px;
 }

 .flex-container>* {
     flex: 1;
 }

 .logo-image img {
     width: 200px;
 }

 .main-card {
     background: rgba(244, 244, 244, 0.6);
     padding: 60px 40px;
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
     text-align: center;
     position: relative;
 }

 .header-title {
     font-size: 4rem;
     font-weight: bold;
     color: var(--primary-blue);
     margin-bottom: 60px;
     letter-spacing: 2px;
     text-transform: uppercase;
 }

 .event-section {
     margin-bottom: 50px;
 }

 .event-title {
     font-size: 2.5rem;
     font-weight: bold;
     color: var(--dark-blue);
     margin-bottom: 15px;
 }

 .event-subtitle {
     font-size: 1.5rem;
     color: var(--dark-blue);
     margin-bottom: 40px;
     font-weight: 500;
 }

 .event-frequency {
     background: var(--accent-pink);
     color: var(--dark-blue);
     padding: 5px 12px;
     border-radius: 20px;
     font-size: 1rem;
     font-weight: 600;
     display: inline-block;
     margin-bottom: 15px;
 }

 .event-description {
     font-size: 1.2rem;
     line-height: 1.5;
     margin-bottom: 15px;
 }

 .event-date-time {
     color: var(--primary-blue);
     font-weight: 600;
     background: rgba(70, 121, 193, 0.1);
     padding: 8px 12px;
     border-radius: 6px;
     display: inline-block;
 }

 .event-location {
     margin: 10px 0px;
 }


 .free-text {
     flex: 1;
     text-align: center;
     font-size: 1.2rem;
     color: var(--primary-blue);
     line-height: 1.4;
 }

 .resistance-text {
     flex: 1;
     text-align: center;

     font-size: 1.2rem;
     color: var(--primary-blue);
     line-height: 1.4;
 }

 .primary {
     background: var(--primary-blue);
     color: white;
     border: none;
 }

 .button {
     padding: 18px 40px;
     font-size: 1.2rem;
     font-weight: bold;
     font-family: inherit;
     border: none;
     border-radius: 25px;
     cursor: pointer;
     text-transform: uppercase;
     letter-spacing: 1px;
     transition: all 0.3s ease;
     text-decoration: none;
     display: inline-block;
     text-align: center;

 }

 label {
     display: block;
     font-size: 1.1rem;
     font-weight: 600;
     color: var(--dark-blue);
     margin-bottom: 8px;
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }

 .required::after {
     content: ' *';
     color: var(--accent-pink);
 }

 .primary:hover {
     background: var(--dark-blue);
     transform: translateY(-3px);
     box-shadow: 0 8px 25px rgba(70, 121, 193, 0.3);
 }

 /* Input Fields */
 input[type="text"],
 input[type="email"],
 input[type="tel"],
 input[type="date"],
 input[type="time"],
 input[type="number"],
 select,
 textarea {
     width: 100%;
     padding: 15px 20px;
     font-size: 1.1rem;
     font-family: inherit;
     border: 3px solid var(--primary-blue);
     border-radius: 12px;
     background: white;
     color: var(--dark-blue);
     transition: all 0.3s ease;
     margin-bottom: 8px;
 }

 input:focus,
 select:focus,
 textarea:focus {
     outline: none;
     border-color: var(--accent-yellow);
     box-shadow: 0 0 0 3px rgba(203, 167, 55, 0.3);
     transform: translateY(-2px);
 }

 input:hover,
 select:hover,
 textarea:hover {
     border-color: var(--accent-pink);
 }


 /* Textarea specific */
 textarea {
     resize: vertical;
     min-height: 120px;
     line-height: 1.5;
 }

 /* Select specific */
 select {
     cursor: pointer;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234679C1' d='M6 9L1.5 4.5h9L6 9z'/%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-position: right 15px center;
     background-size: 12px;
     appearance: none;
 }

 /* Responsive design */
 @media (max-width: 768px) {
     .container {
         padding: 20px 10px;
     }

     .flex-container {
         flex-direction: column;
     }

     .main-card {
         padding: 40px 20px;
     }

     .header-title {
         font-size: 2.5rem;
         margin-bottom: 40px;
     }

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

     .event-subtitle {
         font-size: 1.2rem;
     }

     .logo-section {
         flex-direction: column;
         gap: 30px;
         text-align: center;
     }

     .free-text,
     .resistance-text {
         text-align: center;
     }
 }

 /* Accessibility improvements */
 .main-card:focus-within {
     outline: 3px solid var(--accent-yellow);
     outline-offset: 2px;
 }

 /* High contrast mode support */
 @media (prefers-contrast: high) {
     .main-card {
         border: 3px solid var(--dark-blue);
     }
 }

 /* Reduced motion support */
 @media (prefers-reduced-motion: reduce) {
     body::before {
         animation: none;
     }
 }