/**
 * TP Contest - Tailwind CSS Alternative
 * 
 * Lightweight utility classes to replace Tailwind CDN
 * Designed specifically for the Figma contest layout
 * @package TP_Contest
 * @since   1.0.6
 */

/* Reset and base styles */
* { box-sizing: border-box; }

/* Default h1 styling */
h1 {
    font-size: 2rem;
    margin: 1rem 0;
    font-weight: 600;
}

/* CSS Variables for Figma Colors */
:root {
    --primary-blue: #000033;
    --primary-green: #C4D82E;
    --primary-purple: #9E7FBA;
    --primary-yellow: #C4D82E;
    --primary-mint: #4ABD98;
    --text-gray: #C6C6D9;
    --yellow-bright: #DCF043;
    --white: #FFFFFF;
}

/* Layout utilities */
.w-full { width: 100%; }
.h-auto { height: auto; }
.min-h-screen { min-height: 100vh; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.hidden { display: none !important; }
.grid { display: grid; }
.block { display: block; }

/* Background colors using CSS variables */
.bg-primary-green { background-color: var(--primary-green); }
.bg-primary-blue { background-color: var(--primary-blue); }
.bg-white { background-color: var(--white); }
.bg-purple { background-color: #9E7FBA; }
.bg-mint { background-color: var(--mint); }
.bg-slate-950 { background-color: #020617; }

/* Validation icons - replace inline styles */
.validation-icon {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.25rem;
    height: 1.25rem;
    display: none;
}

.validation-icon.valid-icon {
    display: none;
}

.validation-icon.error-icon {
    display: none;
}

/* Specific overrides for inline styles */
.prize-item.no-bg {
    align-items: end;
}

.title.text-left {
    text-align: left !important;
}

/* Winners page uppercase text */
.uppercase-text {
    text-transform: uppercase;
}
.bg-black { background-color: #000000; }
.bg-red-600 { background-color: #dc2626; }
.bg-opacity-50 { background-color: rgba(0, 0, 0, 0.5); }
.bg-yellow-300 { background-color: #DCF043; }

/* Text colors using CSS variables */
.text-primary-blue { color: var(--primary-blue); }
.text-primary-green { color: var(--primary-green); }
.text-white { color: var(--white); }
.text-slate-300 { color: #cbd5e1; }
.text-red-600 { color: #dc2626; }


.justify-end { justify-content: end; }
/* Specific width and height classes from Figma */
.w-30 { width: 30px; }
.h-30 { height: 30px; }
.w-36 { width: 144px; }
.h-20 { height: 80px; }
.w-44 { width: 176px; }
.h-28 { height: 112px; }
.w-72 { width: 288px; }
.h-711 { height: 711.50px; }
.w-535 { width: 535px; }
.w-534 { width: 534px; }
.h-80 { height: 320px; }
.w-96 { width: 384px; }
.w-728 { width: 728px; }
.h-655 { height: 655px; }
.w-52 { width: 208px; }
.h-11 { height: 44px; }
.w-757 { width: 757px; }
.w-64 { width: 256px; }

/* Fractional width utilities */
.w-quarter { width: 25%; }
.w-third { width: 33.333%; }
.w-half { width: 50%; }
.w-two-thirds { width: 66.667%; }
.w-three-quarters { width: 75%; }

/* Positioning classes from Figma */
.left-950 { left: 950px; }
.top-61 { top: 61px; }
.left-neg-220 { left: -220px; }
.top-219 { top: 219px; }
.left-100 { left: 100px; }
.top-0 { top: 0px; }
.left-119 { left: 119.18px; }
.top-17 { top: 17.49px; }
.left-74 { left: 74px; }
.top-333 { top: 333px; }
.top-243 { top: 243px; }
.top-354 { top: 354px; }
.top-438 { top: 438px; }
.left-39 { left: 39px; }
.top-495 { top: 495px; }
.left-878 { left: 878px; }
.top-265 { top: 265px; }
.left-156 { left: 156px; }
.top-1267 { top: 1267px; }
.top-1733 { top: 1733px; }
.left-1148 { left: 1148px; }
.top-1725 { top: 1725px; }

/* Z-index */
.z-0 { z-index: 0; }
.z-5 { z-index: 5; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-50 { z-index: 50; }

/* Flexbox utilities */
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.flex-1 { flex: 1; }
.flex-col { flex-direction: column; }

/* Spacing */
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-2\.5 { gap: 0.625rem; }
.gap-3\.5 { gap: 0.875rem; }
.gap-5 { gap: 1.25rem; }
.gap-10 { gap: 2.5rem; }
.gap-12 { gap: 3rem; }
.gap-16 { gap: 4rem; }

/* Padding */
.p-4 { padding: 1rem; }
.p-8 { padding: 2rem; }
.p-10 { padding: 2.5rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-3\.5 { padding-top: 0.875rem; padding-bottom: 0.875rem; }
.pr-16 { padding-right: 4rem; }

/* Margin */
.m-0 { margin: 0; }
.mb-0 { margin-bottom: 0;}
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Typography */
.text-left { text-align: left; }
.text-sm { font-size: 0.875rem; }
.text-lg { font-size: 1.125rem; }
/* Additional specific width classes for Figma */
.w-\[534px\] { width: 534px; }

/* Text size utilities */
.text-sm { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }
.text-6xl { font-size: 3.75rem; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.leading-7 { line-height: 1.75rem; }
.leading-60 { line-height: 60px; }
.leading-loose { line-height: 2; }

/* Font families */
.font-unbounded { font-family: 'Unbounded', sans-serif !important; }
.font-red-hat { font-family: 'Red Hat Display', sans-serif !important; }

/* Text alignment */
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Border radius */
.rounded-5 { border-radius: 5px; }
.rounded-\[5px\] { border-radius: 5px; }
.rounded-lg { border-radius: 0.5rem; }

/* Misc utilities */
.cursor-pointer { cursor: pointer; }
.overflow-x-hidden { overflow-x: hidden !important; }
.overflow-hidden { overflow: hidden; }
.overflow-y-auto { overflow-y: auto; }
.object-contain { object-fit: contain; }
.object-cover { object-fit: cover; }
.underline { text-decoration: underline; }

/* Checkbox styling */
.checkbox-container { position: relative; }
.checkbox-custom { display: inline-block; }
.checkbox-fill { display: none; }
.checkbox-check { display: none; }

/* Show checked state */
input[type="checkbox"]:checked + .checkbox-custom .checkbox-fill { display: block; }
input[type="checkbox"]:checked + .checkbox-custom .checkbox-check { display: block; }

/* Transitions */
.transition-colors { transition-property: color, background-color, border-color; }
.duration-200 { transition-duration: 200ms; }

/* Hover states */
.hover-bg-purple-dark:hover { background-color: #000033; }
.hover-bg-blue-darker:hover { background-color: #000055; }
.hover-bg-red-700:hover { background-color: #b91c1c; }

/* Input styling */
input[type="text"],
input[type="email"],
input[type="tel"] {
    border: none;
    outline: none;
    background: transparent;
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="tel"]::placeholder {
    color: #cbd5e1;
}

/* Modal utilities */
.max-h-modal { max-height: 80vh; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }



/* Contest specific positioning and sizing */
.bottom-backpack-mobile { bottom: -100px; }
.bottom-backpack { bottom: -200px; }
.w-backpack { width: 400px; }
.h-backpack { height: 360px; }
.w-400 { width: 400px; }
.h-360 { height: 360px; }
.w-72 { width: 18rem; }
.h-711 { height: 711.50px; }
.w-44 { width: 11rem; }
.h-28 { height: 7rem; }
.h-20 { height: 5rem; }
.h-16 { height: 4rem; }
.w-28 { width: 7rem; }
.w-36 { width: 9rem; }
.max-h-modal { max-height: 80vh; }
.overflow-y-auto { overflow-y: auto; }

/* Contest colors */
.text-primary-green { color: #C4D82E; }
.text-red-600 { color: #dc2626; }
.bg-red-600 { background-color: #dc2626; }
.accent-primary-blue { accent-color: #000033; }



/* Additional margin/padding */
.pt-32 { padding-top: 8rem; }
.pb-20 { padding-bottom: 5rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-12 { margin-bottom: 3rem; }
.mr-3 { margin-right: 0.75rem; }

/* Grid columns */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-6 { grid-template-columns: 1fr auto auto auto auto auto; }



/* Button hover states */
.hover-bg-blue-darker:hover { background-color: #000055; }
.hover-bg-red-700:hover { background-color: #b91c1c; }

/* Focus ring utilities */
.focus-outline-none:focus { outline: none; }
.focus-ring-2:focus { box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5); }
.focus-ring-primary-blue:focus { box-shadow: 0 0 0 2px rgba(0, 0, 51, 0.5); }



/* Container */
.container { 
    width: 100%; 
    max-width: 1200px; 
    margin: 0 auto; 
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Modal utilities */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.modal-overlay.hidden {
    display: none !important;
}

/* Form utilities */
.form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font-size: 1rem;
    line-height: 1.5;
}

.form-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.btn-primary {
    background-color: #000033;
    color: white;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-primary:hover {
    background-color: #000055;
}

.btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ===== FIGMA-BASED CONTEST LANDING PAGE ===== */



/* Typography */
.font-unbounded { font-family: 'Unbounded', sans-serif; }
.font-red-hat { font-family: 'Red Hat Display', sans-serif; }

/* Colors */
.text-primary-blue { color: var(--primary-blue); }
.text-white { color: var(--white); }
.text-slate-300 { color: #cbd5e1; }
.bg-primary-green { background-color: var(--primary-green); }
.bg-primary-blue { background-color: var(--primary-blue); }
.bg-primary-purple { background-color: var(--primary-purple); }
.bg-primary-yellow { background-color: var(--primary-yellow); }
.bg-white { background-color: var(--white); }
.bg-slate-950 { background-color: #020617; }
.bg-yellow { background-color: var(--primary-yellow); }

/* Main Contest Container */
.contest {
    width: 100%;
    background-color: var(--primary-green);
    overflow: hidden;
    font-family: 'Unbounded', sans-serif;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 50px;
}

/* Header */
.contest header {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-bottom: 100px;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

.logo-box {
    width: 176px;
    height: 112px;
    background-color: var(--primary-blue);
    position: relative;
}

.logo-box .logo {
    width: 144px;
    height: 80px;
    position: absolute;
    top: 17px;
    left: 19px;
}

.menu {
    display: flex;
    gap: 48px;
}

.menu a {
    color: var(--primary-blue);
    font-size: 20px;
    font-weight: 400;
    font-family: 'Unbounded', sans-serif;
    text-decoration: none;
    cursor: pointer;
}

/* Content Section */
.content {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 60px;
    width: 100%;
}

/* Mobile Navigation (hidden on desktop) */
.mobile-menu-container {
    position: relative;
    z-index: 8888;
    display: none;
}

.mobile-overlay {
    display: none;
}

.mobile-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
}

body.mobile-menu-open {
    overflow: hidden !important;
}

/* Banner Content */
.banner {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.title-section {
    position: relative;
    width: 535px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.title-section .bg-element.purple {
    width: 555px;
    height: auto;
    position: absolute;
    right: 95px;
    top: -20px;
    z-index: 0;
}


.title-section .bg-element.mint {
    width: 708px;
    height: auto;
    position: absolute;
    right: -175px;
    top: -20px;
    z-index: 1;
}

.title-section .bg-element.mint::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 708px;
    height: 311px;
    background: var(--primary-mint);
    clip-path: polygon(512.705px 0, 0 0, 0 193.5px, 707.5px 310.5px);
}

.title-section .title {
    color: var(--white);
    font-size: 60px;
    font-weight: 800;
    font-family: 'Unbounded', sans-serif;
    line-height: 1.1;
    position: relative;
    z-index: 10;
    margin: 0;
    margin-bottom: 30px;
}

.title-section .desc {
    color: var(--white);
    font-size: 20px;
    font-weight: 500;
    font-family: 'Unbounded', sans-serif;
    line-height: 32px;
    margin-top: 24px;
    position: relative;
    z-index: 10;
}

/* Banner image universal styling for all pages/states */
.banner-img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
    display: block;
    max-width: 100%;
}

/* Banner image in containers */
.banner-container .banner-img,
.banner .banner-img,
.content .banner-img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Banner images in flex containers that need to maintain aspect ratio */
.banner .banner-img,
.title-section .banner-img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
    display: block;
    flex-shrink: 0;
}

/* Ensure any banner-related images maintain aspect ratio */
img[class*="banner"],
.banner img,
.banner-container img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Registration Form */
.registration {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    margin: 0;
}

.registration-form {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    text-align: left;
    gap: 15px;
}

.registration-form .title {
    color: var(--primary-blue);
    font-size: 30px;
    font-weight: 500;
    font-family: 'Unbounded', sans-serif;
    line-height: 32px;
    width: 100%;
    margin-bottom: 15px !important;
}

.input-group {   
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.input-group label {
    position: absolute;
    top: 0.6rem;
    left: 1.2rem;
    color: var(--primary-blue);
    font-size: 14px;
    font-family: 'Red Hat Display', sans-serif;
    z-index: 2;
    pointer-events: none;
    font-weight: 600;
}

.input-group input {
     background-color: var(--white);
    border-radius: 5px;
    color: var(--primary-blue);
    font-size: 20px;
    font-weight: 400;
    font-family: 'Unbounded', sans-serif;
    border: 0;
    outline: 0;
    width: 100%;
    padding: 2rem 1.2rem 0.8rem 1.2rem;
    position: relative;
    z-index: 1;
    border: 2px solid transparent;
}

.input-group .input:focus {
    color: var(--primary-blue);
    border-color: var(--primary-blue);
}

.input-group .icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 2px;
    width: 120px;
    height: 80%;
    pointer-events: none;
    z-index: 2;
    background: linear-gradient(90deg, transparent 0%, white 50%, white 100%);
    display: flex;
    flex-direction: row;
    justify-content: right;
}

.input-group .icon img {
    position: relative;
    width: 30px;
    height: auto;
    margin-right: 1.2rem;
}

.checkbox-group {
    display: flex;
    align-items: center;
    justify-content: start;
    width: 100%;
    text-align: left;
    gap: 7.5px;
}

.checkbox-wrapper {
    cursor: pointer;
}

.checkbox {
    width: 30px;
    height: 30px;
    border-radius: 5px;
    background-color: var(--white);
    position: relative;
    border: 2px solid var(--white);
}

.checkbox.checked {
    background-color: var(--primary-yellow);
}

.checkbox .check-mark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 12px;
    stroke: var(--primary-blue);
    stroke-width: 3;
    fill: none;
}

.checkbox-group .rule {
    margin: 0;
    color: var(--primary-blue);
    font-size: 18px;
    font-family: 'Red Hat Display', sans-serif;
    cursor: pointer;
}

.checkbox-group a {
    text-decoration: underline;
}

/* Checkbox error state */
.checkbox-group.checkbox-error .rule {
    color: #e82c2a !important;
}

.checkbox-group.checkbox-error .checkbox {
    border: 2px solid #e82c2a !important;
}

.submit-btn {
    background: none;
    border: none;
    color: #FFFFFF;
    background-color: #9E7FBA;
    font-size: 1.25rem;
    font-weight: 400;
    font-family: 'Unbounded', sans-serif;
    text-align: center;
    cursor: pointer;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    padding: 25px 30px;
}

.submit-btn:hover,
.submit-btn:focus {
    background: var(--primary-blue);
    color: #FFFFFF;
    font-size: 1.25rem;
    font-weight: 400;
    font-family: 'Unbounded', sans-serif;
}

/* Prizes Section */
.prizes {
padding: 100px 0;
padding-top: 200px;
    display: flex;
    justify-content: flex-start;
    align-self: start;
}

.prizes-grid {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: 62px;
    width: 100%;
    align-items: center;
}

/* Title takes first position */
.prize-item:first-child {
    grid-column: 1;
    grid-row: 1;
}

/* First row: Title + 2 prizes */
.prize-item:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
}

.prize-item:nth-child(3) {
    grid-column: 3;
    grid-row: 1;
}

/* Second row: 3 prizes */
.prize-item:nth-child(4) {
    grid-column: 1;
    grid-row: 2;
}

.prize-item:nth-child(5) {
    grid-column: 2;
    grid-row: 2;
}

.prize-item:nth-child(6) {
    grid-column: 3;
    grid-row: 2;
}

/* Third row: 3 prizes */
.prize-item:nth-child(7) {
    grid-column: 1;
    grid-row: 3;
}

.prize-item:nth-child(8) {
    grid-column: 2;
    grid-row: 3;
}

.prize-item:nth-child(9) {
    grid-column: 3;
    grid-row: 3;
}

/* Fourth row: 3 prizes */
.prize-item:nth-child(10) {
    grid-column: 1;
    grid-row: 4;
}

.prize-item:nth-child(11) {
    grid-column: 2;
    grid-row: 4;
}

.prize-item:nth-child(12) {
    grid-column: 3;
    grid-row: 4;
}



.prize-item .title {
    color: var(--primary-blue);
    font-size: 60px;
    font-weight: 800;
    font-family: 'Unbounded', sans-serif;
    width: 100%;
    max-width: 384px;
    text-align: center;
}

.prize-content {
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: start;
    text-align: left;
    gap: 10px;
    width: 100%;
}

.prize-content h3.name {
    padding: 10px 20px;
    background-color: #000033;
    color: var(--white);
    font-size: 24px;
    font-weight: 600;
    font-family: 'Unbounded', sans-serif;
    line-height: 32px;
    margin: 0;
    align-self: start;
}

.prize-content h1 {
    color: var(--primary-blue);
    font-size: 60px;
    font-weight: 700;
    font-family: 'Unbounded', sans-serif;
    line-height: 60px;
    margin: 0;
}

.prize-content {
    color: var(--primary-blue);
    font-size: 24px;
    font-weight: 600;
    font-family: 'Unbounded', sans-serif;
    line-height: 32px;
}

/* Footer */
footer {
    margin-top: 50px;
    margin-bottom: 50px;
    width: 100%;
    
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}

.footer-left {
    width: auto;
}

.footer-left p {
    color: var(--primary-blue);
    font-size: 18px;
    font-family: 'Red Hat Display', sans-serif;
    line-height: 28px;
    margin: 0;
}

.footer-right {
    width: auto;
    text-align: right;
}

.footer-right p {
    color: var(--primary-blue);
    font-size: 24px;
    font-family: 'Red Hat Display', sans-serif;
    line-height: 32px;
    margin: 0;
}

/* Body overflow control for modals */
body.modal-open {
    overflow: hidden;
}

/* Modals */
.modal {
    position: fixed;
    inset: 0;
    background-color: rgba(196, 216, 46, 0.66);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
}

/* Success Modal Specific Styles */
#success-modal {
    background-color: rgba(196, 216, 46, 0.66);
}

/* Error Modal Specific Styles */
#error-modal {
    background-color: rgba(196, 216, 46, 0.66);
}

#error-modal .success-modal-body {
    background-color: #000033;
}

#error-modal .close-modal {
    position: absolute;
    top: 15px;
    right: 15px;
    cursor: pointer;
    background: none;
    border: none;
    color: white;
    font-size: 1.125rem;
    font-weight: 300;
    font-family: 'Unbounded', sans-serif;
    line-height: normal;
}

.success-modal-body {
    width: 698px;
    padding: 56px;
    position: relative;
    background-color: #000033;
    border-radius: 10px;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 48px;
}

.success-modal-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 48px;
}

.success-icon {
    width: 192px;
    height: 288px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.success-icon img {
    width: 100%;
    height: auto;
    max-width: 192px;
    max-height: 288px;
}

.success-message {
    text-align: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    font-weight: 500;
    font-family: 'Unbounded', sans-serif;
    line-height: 2.25rem;
}

.plaza-logo {
    width: 144px;
    height: 80px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.plaza-logo span {
    color: white;
    font-size: 2rem;
    font-weight: 800;
    font-family: 'Unbounded', sans-serif;
    letter-spacing: 0.1em;
}

#success-modal .close-modal {
    position: absolute;
    top: 15px;
    right: 15px;
    cursor: pointer;
    background: none;
    border: none;
    color: white;
    font-size: 1.125rem;
    font-weight: 300;
    font-family: 'Unbounded', sans-serif;
    line-height: normal;
}

.modal .body {
    position: absolute;
    top: 50%;
    left: 50%;
    overflow-x: hidden;
    width: 80%;
    height: auto;
    background: var(--white);
    border-radius: 10px;
    transform: translate(-50%,-50%);
    padding: 60px;
}


.modal.hidden {
    display: none;
}

.modal main {
    background-color: var(--white);
    border-radius: 8px;
    max-width: 48rem;
    max-height: 32rem;
    overflow-y: auto;
    position: relative;
    padding: 60px;
    margin: 0;
}


.close-modal {
    position: absolute;
    top: 15px;
    right: 15px;
    cursor: pointer;
    background: none;
    border: none;
    color: var(--primary-blue);
    font-size: 1.125rem;
    font-weight: 300;
    font-family: 'Unbounded', sans-serif;
    line-height: normal;
}

.modal-content h1 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--primary-blue);
    font-family: 'Unbounded', sans-serif;
}



.modal-content h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--primary-blue);
    font-family: 'Unbounded', sans-serif;
}

.modal-content p {
    margin-bottom: 16px;
    color: var(--primary-blue);
    font-family: 'Red Hat Display', sans-serif;
    line-height: 1.6;
}

.modal-content img {
    max-width: 100%;
    height: auto;
    margin: 16px auto;
    display: block;
}

/* Icon positioning */
.input-group .icon {
    position: absolute;
    top: 50%;
    right: 2px;
    width: 120px;
    height: 80%;
    pointer-events: none;
    z-index: 2;
    transform: translateY(-50%);
    display:none;
}

.input-group .icon img {
    position: relative;
    width: 30px;
    height: auto;
}
/* Input validation states */
.input-group.valid .input {
    border: 2px solid var(--primary-green);
}

.input-group.error .input {
    border: 2px solid #e82c2a !important;
}

.input-group.error label {
    color: #e82c2a !important;
}
.input-group.valid .icon {
    display: flex !important;
}

.input-group.error .icon {
    display: flex !important;
}

.input-group .validation-icon {
    display: none !important;
}

.input-group.valid .validation-icon.valid-icon {
    display: block !important;
}

.input-group.error .validation-icon.error-icon {
    display: block !important;
}




/* Footer content should inherit its parent styling */
.footer-content p,
.footer-content h1,
.footer-content h2,
.footer-content h3,
.footer-content h4,
.footer-content h5,
.footer-content h6 {
    margin: 0 !important;
    padding: 0 !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
    line-height: inherit !important;
}

.footer-content img {
    margin: 0 !important;
    padding: 0 !important;
    display: block;
    max-width: 100%;
    height: auto;
}

/* Modal content styling */
.modal-content p {
    color: #000033 !important;
    font-family: 'Red Hat Display', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    margin: 0 0 1rem 0 !important;
    padding: 0 !important;
}

.modal-content h1,
.modal-content h2,
.modal-content h3,
.modal-content h4,
.modal-content h5,
.modal-content h6 {
    color: #000033 !important;
    font-family: 'Unbounded', sans-serif !important;
    font-size: 1.25rem !important;
    font-weight: 500 !important;
    line-height: normal !important;
    margin: 1.5rem 0 0.5rem 0 !important;
    padding: 0 !important;
    text-transform: none !important;
}

.modal-content img {
    margin: 0 !important;
    padding: 0 !important;
    display: block;
    max-width: 100%;
    height: auto;
}

.modal-content .heading {
    color: var(--primary-blue);
    font-size: 1.5rem;
    font-weight: 500;
    font-family: 'Unbounded', sans-serif;
    line-height: 1.5;
}
/* Form Input Styles */
.form-input-container {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 14px 20px;
    background: white;
    border-radius: 5px;
    transition: all 0.2s ease;
}

.form-input-container.focused {
    outline: 2px solid var(--primary-blue);
    outline-offset: -2px;
}

.form-input-container.valid {
    outline: 2px solid var(--primary-blue);
    outline-offset: -2px;
}

.form-input-container.error {
    outline: 2px solid #e82c2a;
    outline-offset: -2px;
}

.form-input-container.filled {
    outline: 2px solid var(--primary-blue);
    outline-offset: -2px;
}

.form-input-label {
    color: var(--primary-blue);
    font-size: 0.875rem;
    font-family: 'Red Hat Display', sans-serif;
    font-weight: 400;
}

.form-input-field {
    color: #cbd5e1;
    font-size: 1.25rem;
    font-family: 'Unbounded', sans-serif;
    font-weight: 400;
    background: transparent;
    border: none;
    outline: none;
    width: 100%;
}

.form-input-field:focus,
.form-input-field.valid,
.form-input-container.filled .form-input-field {
    color: var(--primary-blue);
}

.form-input-container .validation-icon {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    width: 24px;
    height: 24px;
}

.form-input-container.valid .validation-icon.success {
    display: block;
}

.form-input-container.error .validation-icon.error {
    display: block;
}

/* Layout Styles for Contest Page */
.contest-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 100px;
    background: var(--primary-green);
    position: relative;
}

.contest-logo-container {
    display: flex;
    align-items: center;
    background: var(--primary-blue);
    padding: 17px 19px;
    border-radius: 0;
}

.contest-nav {
    display: flex;
    gap: 48px;
    align-items: center;
}

.contest-main {
    background: var(--primary-green);
    padding: 0 100px;
    position: relative;
    overflow: hidden;
}

.contest-content {
    display: grid;
    grid-template-columns: 1fr 534px;
    gap: 60px;
    align-items: start;
    padding: 80px 0;
    position: relative;
    z-index: 10;
}

.contest-promo {
    position: relative;
    z-index: 10;
}

.contest-form-section {
    position: relative;
    z-index: 10;
}

.contest-prizes {
    padding: 80px 100px;
    background: var(--primary-green);
}

.contest-footer {
    background: var(--primary-green);
    display: flex;
    justify-content: space-between;
    align-items: end;
    padding: 40px 100px;
}

/* New Flow Layout Styles */

/* Contest Page Layout */
.contest-page {
    width: 100%;
    min-height: 100vh;
    background-color: var(--primary-green);
    display: flex;
    flex-direction: column;
}

/* Header */
.contest-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40px 100px;
    background-color: var(--primary-green);
    position: relative;
    z-index: 20;
}

.contest-logo-container {
    background-color: var(--primary-blue);
    padding: 17px 19px;
    width: 176px;
    height: 112px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contest-nav {
    display: flex;
    align-items: center;
    gap: 48px;
}

.contest-nav div,
.contest-nav a {
    color: var(--primary-blue);
    font-size: 20px;
    font-weight: 400;
    font-family: 'Unbounded', sans-serif;
    text-decoration: none;
    cursor: pointer;
}

.contest-nav a:hover,
.contest-nav div:hover {
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

/* Main Content */
.contest-main {
    flex: 1;
    padding: 80px 100px;
}

.content-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
}

/* Left Content */
.content-left {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.main-title {
    font-family: 'Unbounded', sans-serif;
    font-size: 48px;
    font-weight: 700;
    color: var(--primary-blue);
    line-height: 1.2;
    max-width: 400px;
}

.main-description {
    font-family: 'Red Hat Display', sans-serif;
    font-size: 24px;
    font-weight: 400;
    color: var(--primary-blue);
    line-height: 1.33;
    max-width: 624px;
}

.steps-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 624px;
}

.step-box {
    background: white;
    border: 1px solid var(--primary-blue);
    padding: 20px;
    min-height: 100px;
    display: flex;
    align-items: center;
}

.step-text {
    font-family: 'Red Hat Display', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-blue);
    line-height: 1.3;
}

/* Right Content - Form */
.content-right {
    display: flex;
    justify-content: flex-end;
}

.form-container {
    background-color: var(--primary-blue);
    padding: 48px;
    border-radius: 12px;
    width: 100%;
    max-width: 534px;
}

.form-title {
    font-family: 'Unbounded', sans-serif;
    font-size: 30px;
    font-weight: 700;
    color: white;
    line-height: 1.2;
    margin-bottom: 40px;
}

.registration-form {
    display: flex;
    flex-direction: column;
    }

.form-row {
    display: flex;
    gap: 16px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group-half {
    flex: 1;
}

.form-label {
    font-family: 'Red Hat Display', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: white;
    line-height: 1.2;
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-field {
    width: 100%;
    padding: 16px 48px 16px 16px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    font-family: 'Red Hat Display', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #374151;
    background: white;
    transition: all 0.2s ease;
}

.input-field:focus {
    outline: none;
    border-color: var(--primary-yellow);
    box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.1);
}

.input-field::placeholder {
    color: #9CA3AF;
}

.input-icon-container {
    position: absolute;
    right: 16px;
    display: flex;
    align-items: center;
    pointer-events: none;
}

.input-valid-icon,
.input-error-icon {
    width: 20px;
    height: 20px;
    display: none;
}

/* Input Validation States */
.input-wrapper.valid .input-field {
    border-color: #10B981;
    background-color: #ECFDF5;
}

.input-wrapper.valid .input-valid-icon {
    display: block;
}

.input-wrapper.error .input-field {
    border-color: #EF4444;
    background-color: #FEF2F2;
}

.input-wrapper.error .input-error-icon {
    display: block;
}

/* Checkbox Styles */
.checkbox-container {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
}

.checkbox-input {
    display: none;
}

.checkbox-custom {
    width: 20px;
    height: 20px;
    border: 2px solid white;
    border-radius: 4px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
    margin-top: 2px;
}

.checkbox-input:checked + .checkbox-custom {
    background-color: var(--primary-yellow);
    border-color: var(--primary-yellow);
}

.checkbox-input:checked + .checkbox-custom::after {
    content: '✓';
    color: var(--primary-blue);
    font-weight: bold;
    font-size: 14px;
}

.checkbox-label {
    font-family: 'Red Hat Display', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: white;
    line-height: 1.4;
}

/* Prizes Section */
.prizes-section {
    background-color: var(--primary-green);
    padding: 80px 100px;
}

.prizes-container {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 80px;
    align-items: start;
}

.prizes-title-column {
    display: flex;
    align-items: center;
    justify-content: center;
}

.prizes-title {
    font-family: 'Unbounded', sans-serif;
    font-size: 48px;
    font-weight: 700;
    color: var(--primary-blue);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
}

.prizes-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.prize-item {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    text-align: center;
    background-color: #DCF043;
}

.prize-item.no-bg {
    background-color: transparent !important;
}

.prize-image-container {
    width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    border-radius: 12px;
    overflow: hidden;
}

.prize-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.prize-content {
    color: var(--primary-blue);
}

.prize-content p {
    margin: 0;
}

/* Footer */
.contest-footer {
    background-color: var(--primary-green);
    padding: 40px 100px;
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-top: auto;
}

.footer-content-left,
.footer-content-right {
    font-family: 'Red Hat Display', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: var(--primary-blue);
}

.footer-content-left {
    text-align: left;
}

.footer-content-right {
    text-align: right;
}

@media (min-width: 1280px) {

}

/* Responsive Design - Mobile until 1023px, Desktop from 1024px */
@media (max-width: 1023px) {
    .contest {
        padding: 0 30px;
        max-width: 100%;
    }
    
    .contest header {
        flex-direction: row;
        gap: 20px;
        margin-bottom: 80px;
    }
    
    .logo-box {
        margin-left: 0;
    }
    
    .menu {
        margin-right: 0;
        margin-top: 0;
        justify-content: center;
    }
    
    .content {
        flex-direction: column;
        gap: 40px;
        align-items: center;
    }
    
    .banner {
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
    }
    
    .registration {
        width: 100%;
        margin: 0 auto;
        max-width: 500px;
    }
    
    .title-section {
        width: 100%;
        max-width: 400px;
    }
    
    /* Mobile text sizing based on Figma specs */
    .title-section .title {
        font-size: 1.875rem; /* text-3xl */
        font-weight: 800; /* font-extrabold */
        line-height: 1.2;
    }
    
    .title-section .desc {
        font-size: 0.875rem; /* text-sm */
        font-weight: 500; /* font-medium */
        line-height: 1.25; /* leading-tight */
    }
    
    .registration-form {
        width: 100%;
    }
    
    /* Mobile form styling */
    .registration-form .title {
        font-size: 1.25rem; /* text-xl */
        font-weight: 500; /* font-medium */
        line-height: 2; /* leading-loose */
    }
    
    .input-group label {
        font-family: 'Red Hat Display', sans-serif;
    }
    
    .input-group input {
        font-size: 1.125rem; /* text-lg */
        font-weight: 400; /* font-normal */
    padding: 2rem 1.2rem 0.8rem 1.2rem;
    }
    
    .checkbox-group .rule {
        font-size: 1rem; /* text-base */
        font-family: 'Red Hat Display', sans-serif;
    }
    
    .submit-btn {
        font-size: 1.125rem; /* text-lg */
        font-weight: 400; /* font-normal */
        padding: 20px 25px;
    }
    
    .prizes {
        padding: 60px 16px;
        margin: 60px 0 0;
    }
    
    .prizes-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.5rem;
        text-align: center;
        justify-content: center;
    }
    
    /* Mobile prize styling */
    .prize-item .title {
        font-size: 2.25rem; /* text-4xl */
        font-weight: 800; /* font-extrabold */
    }
    
    .prize-content h3.name {
        font-size: 1.5rem; /* text-2xl */
        font-weight: 600; /* font-semibold */
        line-height: 2; /* leading-loose */
        padding: 8px 16px;
    }
    
    .prize-content h1 {
        font-size: 3.75rem; /* text-6xl */
        font-weight: 700; /* font-bold */
        line-height: 60px; /* leading-[60px] */
    }
    
    .prize-content {
        font-size: 1.25rem; /* text-xl */
        font-weight: 600; /* font-semibold */
        line-height: 2; /* leading-loose */
        padding: 30px;
    }
    
    /* Mobile: All items in single column */
    .prize-item:first-child,
    .prize-item:nth-child(n+2) {
        grid-column: 1;
        grid-row: auto;
    }
    
    footer {
        padding: 0 16px;
    }
    
    .footer-content {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .footer-right {
        text-align: right;
    }

    .footer-left {
        text-align: left;
    }
    
    .footer-left,
    .footer-right {
        width: auto;
    }
    
    /* Mobile footer text sizing */
    .footer-left p {
        font-size: 1.125rem; /* text-lg */
        line-height: 1.75rem; /* leading-7 */
    }
    
    .footer-right p {
        font-size: 0.875rem; /* text-sm */
        line-height: 1.25rem; /* leading-5 */
    }
}


@media (min-width: 1024px) and (max-width: 1279px) {
     .prizes {
        align-self: center;
    }
    .prizes-grid {
        display: grid;
        grid-template-columns: 1fr auto auto;
        gap: 40px;
        width: 100%;
        align-items: center;
    }

    /* Title takes first position */
    .prize-item:first-child {
        grid-column: 1;
        grid-row: 1;
    }

    /* First row: Title + 1 prize */
    .prize-item:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
    }

    /* Second row: 2 prizes */
    .prize-item:nth-child(3) {
        grid-column: 1;
        grid-row: 2;
    }

    .prize-item:nth-child(4) {
        grid-column: 2;
        grid-row: 2;
    }

    /* Third row: 2 prizes */
    .prize-item:nth-child(5) {
        grid-column: 1;
        grid-row: 3;
    }

    .prize-item:nth-child(6) {
        grid-column: 2;
        grid-row: 3;
    }

    /* Fourth row: 2 prizes */
    .prize-item:nth-child(7) {
        grid-column: 1;
        grid-row: 4;
    }

    .prize-item:nth-child(8) {
        grid-column: 2;
        grid-row: 4;
    }

    /* Fifth row: 2 prizes */
    .prize-item:nth-child(9) {
        grid-column: 1;
        grid-row: 5;
    }

    .prize-item:nth-child(10) {
        grid-column: 2;
        grid-row: 5;
    }

    /* Sixth row: 2 prizes */
    .prize-item:nth-child(11) {
        grid-column: 1;
        grid-row: 6;
    }

    .prize-item:nth-child(12) {
        grid-column: 2;
        grid-row: 6;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .prizes {
        align-self: center;
    }
    .prizes-grid {
        display: grid;
        grid-template-columns: 1fr auto auto;
        gap: 40px;
        width: 100%;
        align-items: center;
    }

    /* Title takes first position */
    .prize-item:first-child {
        grid-column: 1;
        grid-row: 1;
    }

    /* First row: Title + 1 prize */
    .prize-item:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
    }

    /* Second row: 2 prizes */
    .prize-item:nth-child(3) {
        grid-column: 1;
        grid-row: 2;
    }

    .prize-item:nth-child(4) {
        grid-column: 2;
        grid-row: 2;
    }

    /* Third row: 2 prizes */
    .prize-item:nth-child(5) {
        grid-column: 1;
        grid-row: 3;
    }

    .prize-item:nth-child(6) {
        grid-column: 2;
        grid-row: 3;
    }

    /* Fourth row: 2 prizes */
    .prize-item:nth-child(7) {
        grid-column: 1;
        grid-row: 4;
    }

    .prize-item:nth-child(8) {
        grid-column: 2;
        grid-row: 4;
    }

    /* Fifth row: 2 prizes */
    .prize-item:nth-child(9) {
        grid-column: 1;
        grid-row: 5;
    }

    .prize-item:nth-child(10) {
        grid-column: 2;
        grid-row: 5;
    }

    /* Sixth row: 2 prizes */
    .prize-item:nth-child(11) {
        grid-column: 1;
        grid-row: 6;
    }

    .prize-item:nth-child(12) {
        grid-column: 2;
        grid-row: 6;
    }
}
@media (max-width: 767px) {
    .prizes {
        align-self: center;
        margin-top: 0;
    }
     .banner {
        width: 100%;
        margin: 0 auto;
        max-height: 100%;
        max-width: 100%;
    }

    .banner img {
        width: 100%;
        object-fit: cover;
    }

    .registration {
        max-width: unset !important;
        padding: 0 50px;
    }

    /* Mobile Navigation */
    .menu {
        display: none;
    }

    .mobile-menu-container {
        display: flex;
        align-items: center;
    }

    .mobile-menu-button {
        background: none;
        border: none;
        cursor: pointer;
        padding: 8px;
        color: white;
        z-index: 1002;
        position: relative;
        transition: all 0.3s ease;
        width: 80px; /* Fixed width for consistent positioning */
        height: 80px; /* Fixed height for consistent positioning */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Animated Hamburger Menu Styles */
    .ham {
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: transform 400ms;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
        width: 64px; /* Increased from 32px */
        height: 64px; /* Fixed height to match width */
    }

    .hamRotate.active {
        transform: rotate(45deg);
    }

    .line {
        fill: none;
        transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
        stroke: #000033; /* Primary blue color */
        stroke-width: 5.5;
    }

    /* Change color when menu is active/open */
    body.mobile-menu-open .line {
        stroke: #C4D82E; /* Primary yellow color */
    }

    .ham1 .top {
        stroke-dasharray: 40 139;
    }

    .ham1 .bottom {
        stroke-dasharray: 40 180;
    }

    .ham1.active .top {
        stroke-dashoffset: -98px;
    }

    .ham1.active .bottom {
        stroke-dashoffset: -138px;
    }

    /* When mobile menu is open, make button fixed in position */
    body.mobile-menu-open .mobile-menu-button {
        position: fixed;
        top: 40px;
        right: 100px;
        z-index: 1003;
    }

    .mobile-menu-button svg {
        width: 64px; /* Increased from 32px */
        height: 64px; /* Fixed height to match width */
        transition: all 0.3s ease;
    }

    .mobile-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: var(--primary-blue);
        display: flex;
        flex-direction: column;
        gap: 73px;
        align-items: center;
        justify-content: center;
        z-index: 1001;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        overflow: hidden; /* Hide page content behind overlay */
    }

    .mobile-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    /* Hide page content when mobile menu is open */
    body.mobile-menu-open {
        overflow: hidden;
    }

    body.mobile-menu-open .contest > *:not(header) {
        visibility: hidden;
    }

    body.mobile-menu-open header .logo-box,
    body.mobile-menu-open header .menu {
        visibility: hidden;
    }

    .mobile-overlay .logo {
        display: flex;
        width: 100%;
        height: auto;
        max-width: 182.282958984375px;
        justify-content: center;
    }

    .mobile-overlay .logo img {
        width: 100%;
    }

    .mobile-nav {
        display: flex;
        flex-direction: column;
        gap: 36px;
        text-align: center;
    }

    .mobile-nav a {
        font-family: 'Red Hat Display', sans-serif;
        font-size: 24px;
        font-weight: 500;
        color: white;
        text-decoration: none;
        transition: color 0.2s ease;
    }

    .mobile-nav a:hover {
        color: var(--primary-yellow);
    }

    /* Adjust mobile menu button position for standard mobile screens */
    body.mobile-menu-open .mobile-menu-button {
        top: 15px;
        right: 30px;
    }

    /* Ensure consistent button size on mobile */
    .mobile-menu-button {
        width: 80px !important;
        height: 80px !important;
    }

    .mobile-menu-button svg {
        width: 64px !important;
        height: 64px !important;
    }

    /* Mobile Rules Modal - Fullscreen */
    #rules-modal {
        background-color: #C4D82E;
        padding: 0;
        z-index: 9999;
    }

    #rules-modal .body {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        max-width: none;
        max-height: none;
        background: #C4D82E;
        border-radius: 0;
        transform: none;
        padding: 20px;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
    }

    #rules-modal .close-modal {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 1004;
        color: var(--primary-blue);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        font-weight: bold;
    }

    #rules-modal .modal-content {
        flex: 1;
        padding-top: 60px;
        padding-bottom: 20px;
    }

    #rules-modal .modal-content h1,
    #rules-modal .modal-content h2,
    #rules-modal .modal-content h3,
    #rules-modal .modal-content h4,
    #rules-modal .modal-content h5,
    #rules-modal .modal-content h6 {
        color: var(--primary-blue) !important;
    }

    #rules-modal .modal-content p {
        color: var(--primary-blue) !important;
    }

    /* Mobile Success Modal - Fullscreen */
    #success-modal {
        background-color: rgba(196, 216, 46, 0.66);
        padding: 0;
        z-index: 9999;
    }

    #success-modal .success-modal-body {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        max-width: none;
        max-height: none;
        background: #000033;
        border-radius: 0;
        transform: none;
        padding: 20px;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 32px;
    }

    #success-modal .close-modal {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 1004;
        color: white;
        width: auto;
        text-align: right;
        font-size: 1rem;
    }

    #success-modal .success-modal-content {
        gap: 32px;
        padding: 20px;
    }

    #success-modal .success-icon {
        width: 144px;
        height: 216px;
    }

    #success-modal .success-message {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }

    #success-modal .plaza-logo {
        width: 108px;
        height: 60px;
    }

    /* Mobile Error Modal - Fullscreen */
    #error-modal {
        background-color: rgba(196, 216, 46, 0.66);
        padding: 0;
        z-index: 9999;
    }

    #error-modal .success-modal-body {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        max-width: none;
        max-height: none;
        background: #000033;
        border-radius: 0;
        transform: none;
        padding: 20px;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 32px;
    }

    #error-modal .close-modal {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 1004;
        color: white;
        width: auto;
        text-align: right;
        font-size: 1rem;
    }

    #error-modal .success-modal-content {
        gap: 32px;
        padding: 20px;
    }

    #error-modal .success-message {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }

    #error-modal .plaza-logo {
        width: 108px;
        height: 60px;
    }
    
}

@media (max-width: 400px) {
    /* Proportional scaling for very small screens */
    html {
        font-size: calc(14px + 0.5vw); /* Base font size scales with viewport width */
    }
    
    .contest {
        padding: calc(24px * 0.8) calc(16px * 0.8);
    }
    
    .contest header {
        gap: calc(20px * 0.8);
        margin-bottom: calc(80px * 0.8);
    }
    
    .logo-box {
        width: calc(176px * 0.8);
        height: calc(112px * 0.8);
    }
    
    .logo-box .logo {
        width: calc(144px * 0.8);
        height: calc(80px * 0.8);
        top: calc(17px * 0.8);
        left: calc(19px * 0.8);
    }
    
    .content {
        gap: calc(40px * 0.8);
    }
    
    /* Responsive text scaling */
    .title-section .title {
        font-size: calc(1.875rem * 0.85); /* Scaled down from text-3xl */
        line-height: calc(1.2 * 0.9);
    }
    
    .title-section .desc {
        font-size: calc(0.875rem * 0.9); /* Scaled down from text-sm */
        line-height: calc(1.25 * 0.9);
    }

    .registration {
        padding: 0 10px;
    }
    
    .registration-form .title {
        font-size: calc(1.25rem * 0.85); /* Scaled down from text-xl */
        line-height: calc(2 * 0.9);
    }
    
    .input-group label {
        font-size: calc(0.875rem * 0.9); /* Scaled down from text-sm */
    }
    
    .input-group input {
        font-size: calc(1.125rem * 0.85); /* Scaled down from text-lg */
        /* padding: calc(1.5rem * 0.8) calc(1rem * 0.8) calc(0.6rem * 0.8) calc(1rem * 0.8); */
    }
    
    .checkbox-group .rule {
        font-size: calc(1rem * 0.9); /* Scaled down from text-base */
    }

    /* Adjust mobile menu button position for very small screens */
    body.mobile-menu-open .mobile-menu-button {
        top: calc(35px * 0.8);
        right: calc(15px * 0.8); /* Adjusted for smaller screens */
    }

    /* Maintain consistent button size on very small screens */
    .mobile-menu-button {
        width: calc(80px * 0.9) !important;
        height: calc(80px * 0.9) !important;
    }

    .mobile-menu-button svg {
        width: calc(64px * 0.9) !important;
        height: calc(64px * 0.9) !important;
    }

    /* Mobile Rules Modal - Fullscreen */
    .modal {
        background-color: #C4D82E;
        padding: 0;
        z-index: 9999;
    }

    .modal .body {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        max-width: none;
        max-height: none;
        background: #C4D82E;
        border-radius: 0;
        transform: none;
        padding: 20px;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
    }

    .modal .close-modal {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 1004;
        background: var(--primary-blue);
        color: white;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        font-weight: bold;
    }

    .modal-content {
        flex: 1;
        padding-top: 60px;
        padding-bottom: 20px;
    }

    .modal-content h1,
    .modal-content h2,
    .modal-content h3,
    .modal-content h4,
    .modal-content h5,
    .modal-content h6 {
        color: var(--primary-blue) !important;
    }

    .modal-content p {
        color: var(--primary-blue) !important;
    }
    
    .submit-btn {
        font-size: calc(1.125rem * 0.85); /* Scaled down from text-lg */
        padding: calc(20px * 0.8) calc(25px * 0.8);
    }
    
    .prizes {
        padding: calc(60px * 0.8) calc(16px * 0.8);
        margin: calc(60px * 0.8) 0;
    }
    
    .prizes-grid {
        gap: calc(1.5rem * 0.8);
    }
    
    .prize-item .title {
        font-size: calc(2.25rem * 0.8); /* Scaled down from text-4xl */
    }
    
    .prize-content h3.name {
        font-size: calc(1.5rem * 0.85); /* Scaled down from text-2xl */
        line-height: calc(2 * 0.9);
        padding: calc(8px * 0.8) calc(16px * 0.8);
    }
    
    .prize-content h1 {
        font-size: calc(3.75rem * 0.75); /* Scaled down from text-6xl */
        line-height: calc(60px * 0.8);
    }
    
    .prize-content {
        font-size: calc(1.25rem * 0.85); /* Scaled down from text-xl */
        line-height: calc(2 * 0.9);
        padding: calc(30px * 0.8);
    }
    
    footer {
        padding: 0 calc(16px * 0.8);
    }
    
    .footer-content {
        gap: calc(1rem * 0.8);
    }
    
    .footer-left p {
        font-size: calc(1.125rem * 0.85); /* Scaled down from text-lg */
        line-height: calc(1.75rem * 0.9);
    }
    
    .footer-right p {
        font-size: calc(0.875rem * 0.9); /* Scaled down from text-sm */
        line-height: calc(1.25rem * 0.9);
    }
    
    /* Additional responsive adjustments */
    .checkbox {
        width: calc(30px * 0.8);
        height: calc(30px * 0.8);
    }
    
    .checkbox .check-mark {
        width: calc(16px * 0.8);
        height: calc(12px * 0.8);
    }
    
    .input-group .icon {
        width: calc(120px * 0.8);
    }
    
    .input-group .icon img {
        width: calc(30px * 0.8);
        margin-right: calc(1.2rem * 0.8);
    }
}

/* Winners Page Specific Styles */
.winners-header {
    position: relative;
    width: 100%;
    height: auto;
    padding: 0;
    background-color: var(--primary-green);
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    margin-bottom: 0 !important;
}

.winners-header .header-right {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 48px; /* gap-12 */
}

.winners-header .header-right .menu {
    display: flex;
    align-items: center;
}

.winners-header .header-right .menu a {
    color: var(--primary-blue);
    font-size: 1.25rem; /* text-xl */
    font-weight: 400; /* font-normal */
    font-family: 'Unbounded', sans-serif;
    text-decoration: none;
    margin: 0;
    white-space: nowrap;
}

.winners-header .header-right .logo-box {
    width: 176px; /* w-44 */
    height: 112px; /* h-28 */
    background-color: var(--primary-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 17.49px 14.90px;
}

.winners-header .header-right .logo-box img {
    width: 144px; /* w-36 */
    height: 80px; /* h-20 */
    max-width: unset;
}

/* Hide mobile navigation on desktop for winners page */
.winners-header .mobile-menu-container {
    display: none;
}

/* Winners page layout - Desktop (Figma exact positioning) */
.winners-content-section {
    position: relative;
    width: 1512px;
    height: 1948px;
    background-color: var(--primary-green);
    overflow: hidden;
    margin: 0 auto;
}

/* Title positioning - absolute like Figma */
.winners-title {
    position: absolute;
    left: 101px;
    top: 82px;
    width: 724px;
}

.winners-title h1 {
    color: var(--primary-blue);
    font-size: 4rem; /* text-6xl */
    font-weight: 800; /* font-extrabold */
    font-family: 'Unbounded', sans-serif;
    line-height: 1.1;
    margin: 0;
    text-align: left;
    display: flex;
    justify-content: center;
}

/* Banner positioning - absolute like Figma */
.banner-container {
    position: absolute;
    left: 766px;
    top: 91px;
    width: 734px;
    height: 734px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner-container .banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Winners list positioning - absolute like Figma */
.winners-list-container {
    position: absolute;
    left: 101px;
    top: 296px;
    width: 756px;
    padding: 0;
}

/* Winners sections styling */
.winners-sections {
    display: flex;
    flex-direction: column;
    gap: 60px; /* Space between prize sections */
    max-width: unset;
    margin: 0;
}

/* Prize sections styling */
.prize-winners-section {
    width: 756px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 0;
}

.prize-title {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 10px;
}

.prize-title h2 {
    color: var(--primary-blue);
    font-size: 1.875rem; /* text-3xl */
    font-weight: 600; /* font-semibold */
    font-family: 'Unbounded', sans-serif;
    line-height: 1.2;
    margin: 0;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 562px;
}

/* RB Baltic logo component placeholder */
.rb-baltic-logo .logo-component {
    width: 128px;
    height: 32px;
    background-color: var(--primary-blue);
    position: relative;
    /* Placeholder for RB Baltic logo SVG component from Figma */
}

/* Winners list styling */
.winners-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.winner-item {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
}

.winner-name,
.winner-phone {
    color: var(--primary-blue);
    font-size: 1.5rem; /* text-2xl */
    font-weight: 400; /* font-normal */
    font-family: 'Unbounded', sans-serif;
    margin: 0;
    width: 320px; /* w-80 from Figma */
    text-align: left;
    display: flex;
    justify-content: center;
}

/* No winners state */
.no-winners {
    color: var(--primary-blue);
    font-size: 1.5rem; /* text-2xl */
    font-weight: 400; /* font-normal */
    font-family: 'Unbounded', sans-serif;
    line-height: 1.75; /* leading-relaxed */
    text-align: left;
    width: 756px;
}

/* Winners footer layout - Desktop */
.contest footer {
    width: 100%;
    padding: 0;
    background: transparent;
}

.contest footer .footer-content {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 28px;
    width: auto;
}

.contest footer .footer-right {
    text-align: right;
    width: auto;
}

.contest footer .footer-right p:first-child {
    color: var(--primary-blue);
    font-size: 1.5rem; /* text-2xl */
    font-family: 'Red Hat Display', sans-serif;
    line-height: 1.75; /* leading-loose */
    margin: 0 0 16px 0;
    text-align: right;
    display: flex;
    justify-content: end;
}

.contest footer .footer-right p:last-child {
    color: var(--primary-blue);
    font-size: 1.125rem; /* text-lg */
    font-family: 'Red Hat Display', sans-serif;
    line-height: 1.75; /* leading-7 */
    margin: 0;
    text-align: right;
    display: flex;
    justify-content: end;
}

/* Media queries for winners page responsiveness */
@media (min-width: 768px) and (max-width: 1023px) {
  
    
    .winners-title h1 {
        font-size: 3.5rem;
    }
    
    .banner-container .banner-img {
        width: 100%;
        height: auto;
        max-width: 500px;
        object-fit: cover;
        object-position: center;
        display: block;
        margin: 0 auto;
    }
}

@media (max-width: 1023px) {
    .winners-content-section {
        flex-direction: column;
        margin-top: 0 !important;
    }
    
    .winners-list-container {
        width: 100%;
        padding: 0;
    }
    
    .banner-container {
        width: 100%;
        padding: 40px 0;
        margin-top: 0;
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .banner-container img {
        width: 728px;
    }
    
    
    .winners-title h1 {
        font-size: 3rem; /* Slightly smaller on medium screens */
        margin-top: 20px;
        margin-bottom: 20px;
        text-align: center;
    }
    
    .winner-name,
    .winner-phone {
        width: auto;
        flex: 1;
        font-size: 1.25rem; /* text-xl */
    }
    
    .banner-container .banner-img {
        width: 100%;
        height: auto;
        max-width: 400px;
        object-fit: cover;
        object-position: center;
        display: block;
        margin: 0 auto;
    }
}

@media (max-width: 767px) {
    .winners-header {
        justify-content: space-between;
        flex-direction: row;
        padding: 0;
        gap: 0;
        position: relative;
        background-color: var(--primary-green);
        height: auto;
    }
    
    .winners-title {
        position: absolute;
        left: 30px;
        top: 115px;
        width: 320px;
        height: 80px;
        order: unset;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .winners-title h1 {
        color: var(--primary-blue);
        font-size: 1.875rem; /* text-3xl */
        font-weight: 800; /* font-extrabold */
        font-family: 'Unbounded', sans-serif;
        line-height: 1.2;
        margin: 0;
        text-align: center;
    }
    
    .header-right {
        position: absolute;
        top: 0;
        right: 0;
        order: unset;
        justify-content: flex-end;
        gap: 0;
        display: flex;
        align-items: flex-start;
    }
    
    .header-right .menu {
        display: none;
    }
    
    .header-right .logo-box {
        width: 112px; /* w-28 */
        height: 80px; /* h-20 */
        background-color: var(--primary-blue);
        padding: 11.76px 14.90px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }
    
    .header-right .logo-box img {
        width: 96px; /* w-24 */
        height: 56px; /* h-14 */
        max-width: unset;
    }
    
    /* Mobile Navigation for Winners Page */
    .winners-header .mobile-menu-container {
        position: absolute;
        top: 34px;
        right: 30px;
        display: flex;
        align-items: center;
        z-index: 1002;
    }
    
    .winners-header .mobile-menu-button {
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        color: var(--primary-blue);
        z-index: 1002;
        position: relative;
        transition: all 0.3s ease;
        width: 32px;
        height: 26px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .winners-header .mobile-menu-button svg {
        width: 32px;
        height: 26px;
    }
    
    /* Content section mobile layout */
    .winners-content-section {
        padding: 0 30px;
        margin-top: 0;
        flex-direction: column;
        background-color: var(--primary-green);
        min-height: auto;
    }
    
    /* Banner positioning - absolute like Figma */
    .banner-container {
        position: absolute;
        top: 189px;
        left: 0;
        width: 384px; /* size-96 */
        height: 384px; /* size-96 */
        padding: 0;
        margin: 0;
        order: unset;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .banner-container .banner-img {
        width: 100%;
        height: 100%;
        max-width: unset;
        object-fit: cover;
        object-position: center;
        display: block;
    }
    
    /* Winners list positioning */
    .winners-list-container {
        position: relative;
        top: 627px;
        left: 0;
        width: 320px; /* w-80 */
        padding: 0;
        order: unset;
        background: transparent;
    }
    
    .winners-sections {
        max-width: unset;
        margin-top: 0;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    
    /* Prize sections styling */
    .prize-winners-section {
        width: 320px; /* w-80 */
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-bottom: 40px;
    }
    
    .prize-title {
        margin-bottom: 0;
    }
    
    .prize-title h2 {
        color: var(--primary-blue);
        font-size: 1.875rem; /* text-3xl */
        font-weight: 600; /* font-semibold */
        font-family: 'Unbounded', sans-serif;
        line-height: 1.2;
        margin: 0;
        text-align: left;
    }
    
    /* Winners list styling */
    .winners-list {
        display: flex;
        flex-direction: column;
        gap: 20px;
        width: 100%;
    }
    
    .winner-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        gap: 0;
        flex-direction: row;
    }
    
    .winner-name,
    .winner-phone {
        color: var(--primary-blue);
        font-size: 1rem; /* text-base */
        font-weight: 400; /* font-normal */
        font-family: 'Unbounded', sans-serif;
        margin: 0;
        width: auto;
        flex: unset;
        text-align: left;
    }
    
    .winner-phone {
        text-align: right;
    }
    
    /* No winners state */
    .no-winners {
        color: var(--primary-blue);
        font-size: 1.875rem; /* text-3xl */
        font-weight: 800; /* font-extrabold */
        font-family: 'Unbounded', sans-serif;
        line-height: 1.2;
        text-align: center;
        width: 320px;
        margin-top: 0;
    }
    
    /* Footer mobile layout */
    footer {
      
        padding: 48px 0; /* py-12 */
        background: transparent;
    }
    
    .footer-content {
        flex-direction: column;
        gap: 28px; /* gap-7 */
        align-items: center;
        justify-content: flex-start;
        width: 100%;
    }
  
    
    .footer-right {
        width: auto;
        text-align: right;
        order: 1;
    }
    
    .footer-right p {
        color: var(--primary-blue);
        font-size: 1.125rem; /* text-lg */
        font-family: 'Red Hat Display', sans-serif;
        line-height: 1.5;
        margin: 0 0 28px 0;
    }
    
    .footer-right p:last-child {
        font-size: 0.875rem; /* text-sm */
        margin-bottom: 0;
    }
    
    /* Ensure mobile container height */
    .contest {
        min-height: 2090px; /* Match Figma height */
        position: relative;
        overflow: hidden;
        padding: 0;
    }
}

/* Mobile Screens (max-width: 767px) */
@media (max-width: 767px) {
    .prizes {
        margin-top: 0;
    }

    .banner img {
        width: 100%;
        height: auto;
        object-fit: cover;
        object-position: center;
        display: block;
    }

    .registration {
        padding: 0 10px;
    }

    /* Mobile Navigation */
    .menu {
        display: none;
    }

    .mobile-menu-container {
        display: flex;
        align-items: center;
        z-index: 1002;
    }

    .mobile-menu-button {
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        color: var(--primary-blue);
        z-index: 1002;
        position: relative;
        transition: all 0.3s ease;
        width: 80px;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Animated Hamburger Menu Styles */
    .ham {
        cursor: pointer;
        transition: transform 400ms;
        user-select: none;
    }

    .hamRotate.active {
        transform: rotate(45deg);
    }

    .line {
        fill: none;
        transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
        stroke: var(--primary-blue);
        stroke-width: 5.5;
        stroke-linecap: round;
    }

    /* Change color when menu is active/open */
    body.mobile-menu-open .line {
        stroke: white;
    }

    .ham1 .top {
        stroke-dasharray: 40 139;
    }

    .ham1 .bottom {
        stroke-dasharray: 40 180;
    }

    .ham1.active .top {
        stroke-dashoffset: -98px;
    }

    .ham1.active .bottom {
        stroke-dashoffset: -138px;
    }

    /* When mobile menu is open, make button fixed in position */
    body.mobile-menu-open .mobile-menu-button {
        position: fixed;
        top: 35px;
        right: 30px;
        z-index: 1003;
    }

    .mobile-menu-button svg {
        width: 64px;
        height: 64px;
    }

    .mobile-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: var(--primary-blue);
        z-index: 1001;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 64px;
        padding: 20px;
    }

    .mobile-overlay.active {
        display: flex;
    }

    /* Hide page content when mobile menu is open */
    body.mobile-menu-open {
        overflow: hidden;
        height: 100vh;
    }

    body.mobile-menu-open .contest > *:not(header) {
        display: none;
    }

    body.mobile-menu-open header .logo-box,
    body.mobile-menu-open header .menu {
        visibility: hidden;
    }

    .mobile-overlay .logo {
        display: flex;
        width: 100%;
        height: auto;
        max-width: 182.282958984375px;
        justify-content: center;
    }

    .mobile-overlay .logo img {
        width: 100%;
    }

    .mobile-nav {
        display: flex;
        flex-direction: column;
        gap: 36px;
        text-align: center;
    }

    .mobile-nav a {
        font-family: 'Red Hat Display', sans-serif;
        font-size: 24px;
        font-weight: 500;
        color: white;
        text-decoration: none;
        transition: color 0.2s ease;
    }

    .mobile-nav a:hover {
        color: var(--primary-yellow);
    }

    /* Adjust mobile menu button position for standard mobile screens */
    body.mobile-menu-open .mobile-menu-button {
        top: 15px;
        right: 30px;
    }

    /* Ensure consistent button size on mobile */
    .mobile-menu-button {
        width: 80px !important;
        height: 80px !important;
    }

    .mobile-menu-button svg {
        width: 64px !important;
        height: 64px !important;
    }

    /* Mobile Rules Modal - Fullscreen */
    #rules-modal {
        background-color: #C4D82E;
        padding: 0;
        z-index: 9999;
    }

    #rules-modal .body {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        max-width: none;
        max-height: none;
        background: #C4D82E;
        border-radius: 0;
        transform: none;
        padding: 20px;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
    }

    #rules-modal .close-modal {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 1004;
        color: var(--primary-blue);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        font-weight: bold;
    }

    #rules-modal .modal-content {
        flex: 1;
        padding-top: 60px;
        padding-bottom: 20px;
    }

    #rules-modal .modal-content h1,
    #rules-modal .modal-content h2,
    #rules-modal .modal-content h3,
    #rules-modal .modal-content h4,
    #rules-modal .modal-content h5,
    #rules-modal .modal-content h6 {
        color: var(--primary-blue) !important;
    }

    #rules-modal .modal-content p {
        color: var(--primary-blue) !important;
    }

    /* Mobile Success Modal - Fullscreen */
    #success-modal {
        background-color: rgba(196, 216, 46, 0.66);
        padding: 0;
        z-index: 9999;
    }

    #success-modal .success-modal-body {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        max-width: none;
        max-height: none;
        background: #000033;
        border-radius: 0;
        transform: none;
        padding: 20px;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 32px;
    }

    #success-modal .close-modal {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 1004;
        color: white;
        width: auto;
        text-align: right;
        font-size: 1rem;
    }

    #success-modal .success-modal-content {
        gap: 32px;
        padding: 20px;
    }

    #success-modal .success-icon {
        width: 144px;
        height: 216px;
    }

    #success-modal .success-message {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }

    #success-modal .plaza-logo {
        width: 108px;
        height: 60px;
    }

    /* Mobile Error Modal - Fullscreen */
    #error-modal {
        background-color: rgba(196, 216, 46, 0.66);
        padding: 0;
        z-index: 9999;
    }

    #error-modal .success-modal-body {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        max-width: none;
        max-height: none;
        background: #000033;
        border-radius: 0;
        transform: none;
        padding: 20px;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 32px;
    }

    #error-modal .close-modal {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 1004;
        color: white;
        width: auto;
        text-align: right;
        font-size: 1rem;
    }

    #error-modal .success-modal-content {
        gap: 32px;
        padding: 20px;
    }

    #error-modal .success-message {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }

    #error-modal .plaza-logo {
        width: 108px;
        height: 60px;
    }

    /* Winners page mobile styles */
    .winners-header {
        justify-content: space-between;
        flex-direction: row;
        padding: 0;
        gap: 0;
        position: relative;
        background-color: var(--primary-green);
        height: auto;
    }
    
    .winners-title {
        position: absolute;
        left: 30px;
        top: 115px;
        width: 320px;
        height: 80px;
        order: unset;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .winners-title h1 {
        color: var(--primary-blue);
        font-size: 1.875rem; /* text-3xl */
        font-weight: 800; /* font-extrabold */
        font-family: 'Unbounded', sans-serif;
        line-height: 1.2;
        margin: 0;
        text-align: center;
    }
    
    .header-right {
        position: absolute;
        top: 0;
        right: 0;
        order: unset;
        justify-content: flex-end;
        gap: 0;
        display: flex;
        align-items: flex-start;
    }
    
    .header-right .menu {
        display: none;
    }
    
    .header-right .logo-box {
        width: 112px; /* w-28 */
        height: 80px; /* h-20 */
        background-color: var(--primary-blue);
        padding: 11.76px 14.90px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }
    
    .header-right .logo-box img {
        width: 96px; /* w-24 */
        height: 56px; /* h-14 */
        max-width: unset;
    }
    
    /* Mobile Navigation for Winners Page */
    .winners-header .mobile-menu-container {
        position: absolute;
        top: 34px;
        right: 30px;
        display: flex;
        align-items: center;
        z-index: 1002;
    }
    
    .winners-header .mobile-menu-button {
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        color: var(--primary-blue);
        z-index: 1002;
        position: relative;
        transition: all 0.3s ease;
        width: 32px;
        height: 26px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .winners-header .mobile-menu-button svg {
        width: 32px;
        height: 26px;
    }
    
    /* Content section mobile layout */
    .winners-content-section {
        padding: 0 30px;
        margin-top: 0;
        flex-direction: column;
        background-color: var(--primary-green);
        min-height: auto;
    }
    
    /* Banner positioning - absolute like Figma */
    .banner-container {
        position: absolute;
        top: 189px;
        left: 0;
        width: 384px; /* size-96 */
        height: 384px; /* size-96 */
        padding: 0;
        margin: 0;
        order: unset;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .banner-container .banner-img {
        width: 100%;
        height: 100%;
        max-width: unset;
        object-fit: cover;
        object-position: center;
        display: block;
    }
    
    /* Winners list positioning */
    .winners-list-container {
        position: relative;
        top: 627px;
        left: 0;
        width: 320px; /* w-80 */
        padding: 0;
        order: unset;
        background: transparent;
    }
    
    .winners-sections {
        max-width: unset;
        margin-top: 0;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    
    /* Prize sections styling */
    .prize-winners-section {
        width: 320px; /* w-80 */
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-bottom: 40px;
    }
    
    .prize-title {
        margin-bottom: 0;
    }
    
    .prize-title h2 {
        color: var(--primary-blue);
        font-size: 1.875rem; /* text-3xl */
        font-weight: 600; /* font-semibold */
        font-family: 'Unbounded', sans-serif;
        line-height: 1.2;
        margin: 0;
        text-align: left;
    }
    
    /* Winners list styling */
    .winners-list {
        display: flex;
        flex-direction: column;
        gap: 20px;
        width: 100%;
    }
    
    .winner-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        gap: 0;
        flex-direction: row;
    }
    
    .winner-name,
    .winner-phone {
        color: var(--primary-blue);
        font-size: 1rem; /* text-base */
        font-weight: 400; /* font-normal */
        font-family: 'Unbounded', sans-serif;
        margin: 0;
        width: auto;
        flex: unset;
        text-align: left;
    }
    
    .winner-phone {
        text-align: right;
    }
    
    /* No winners state */
    .no-winners {
        color: var(--primary-blue);
        font-size: 1.875rem; /* text-3xl */
        font-weight: 800; /* font-extrabold */
        font-family: 'Unbounded', sans-serif;
        line-height: 1.2;
        text-align: center;
        width: 320px;
        margin-top: 0;
    }
    
    /* Footer mobile layout */
    footer {
        padding: 48px 0; /* py-12 */
        background: transparent;
    }
    
    .footer-content {
        flex-direction: column;
        gap: 28px; /* gap-7 */
        align-items: center;
        justify-content: flex-start;
        width: 100%;
    }
    
    .footer-right {
        width: auto;
        text-align: right;
        order: 1;
    }
    
    .footer-right p {
        color: var(--primary-blue);
        font-size: 1.125rem; /* text-lg */
        font-family: 'Red Hat Display', sans-serif;
        line-height: 1.5;
        margin: 0 0 28px 0;
    }
    
    .footer-right p:last-child {
        font-size: 0.875rem; /* text-sm */
        margin-bottom: 0;
    }
    
    /* Ensure mobile container height */
    .contest {
        min-height: 2090px; /* Match Figma height */
        position: relative;
        overflow: hidden;
        padding: 0;
    }
}

/* Small Mobile Screens (max-width: 400px) */
@media (max-width: 400px) {
    /* Proportional scaling for very small screens */
    html {
        font-size: calc(14px + 0.5vw); /* Base font size scales with viewport width */
    }
    
    .contest {
        padding: calc(24px * 0.8) calc(16px * 0.8);
    }
    
    .contest header {
        gap: calc(20px * 0.8);
        margin-bottom: calc(80px * 0.8);
    }
    
    .logo-box {
        width: calc(176px * 0.8);
        height: calc(112px * 0.8);
    }
    
    .logo-box .logo {
        width: calc(144px * 0.8);
        height: calc(80px * 0.8);
        top: calc(17px * 0.8);
        left: calc(19px * 0.8);
    }
    
    .content {
        gap: calc(40px * 0.8);
    }
    
    /* Responsive text scaling */
    .title-section .title {
        font-size: calc(1.875rem * 0.85); /* Scaled down from text-3xl */
        line-height: calc(1.2 * 0.9);
    }
    
    .title-section .desc {
        font-size: calc(0.875rem * 0.9); /* Scaled down from text-sm */
        line-height: calc(1.25 * 0.9);
    }

    .registration {
        padding: 0 10px;
    }
    
    .registration-form .title {
        font-size: calc(1.25rem * 0.85); /* Scaled down from text-xl */
        line-height: calc(2 * 0.9);
    }
    
    .input-group label {
        font-size: calc(0.875rem * 0.9); /* Scaled down from text-sm */
    }
    
    .input-group input {
        font-size: calc(1.125rem * 0.85); /* Scaled down from text-lg */
    }
    
    .checkbox-group .rule {
        font-size: calc(1rem * 0.9); /* Scaled down from text-base */
    }

    /* Adjust mobile menu button position for very small screens */
    body.mobile-menu-open .mobile-menu-button {
        top: calc(35px * 0.8);
        right: calc(15px * 0.8); /* Adjusted for smaller screens */
    }

    /* Maintain consistent button size on very small screens */
    .mobile-menu-button {
        width: calc(80px * 0.9) !important;
        height: calc(80px * 0.9) !important;
    }

    .mobile-menu-button svg {
        width: calc(64px * 0.9) !important;
        height: calc(64px * 0.9) !important;
    }

    /* Mobile Rules Modal - Fullscreen */
    .modal {
        background-color: #C4D82E;
        padding: 0;
        z-index: 9999;
    }

    .modal .body {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        max-width: none;
        max-height: none;
        background: #C4D82E;
        border-radius: 0;
        transform: none;
        padding: 20px;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
    }

    .modal .close-modal {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 1004;
        background: var(--primary-blue);
        color: white;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        font-weight: bold;
    }

    .modal-content {
        flex: 1;
        padding-top: 60px;
        padding-bottom: 20px;
    }

    .modal-content h1,
    .modal-content h2,
    .modal-content h3,
    .modal-content h4,
    .modal-content h5,
    .modal-content h6 {
        color: var(--primary-blue) !important;
    }

    .modal-content p {
        color: var(--primary-blue) !important;
    }
    
    .submit-btn {
        font-size: calc(1.125rem * 0.85); /* Scaled down from text-lg */
        padding: calc(20px * 0.8) calc(25px * 0.8);
    }
    
    .prizes {
        padding: calc(60px * 0.8) calc(16px * 0.8);
        margin: calc(60px * 0.8) 0;
    }
    
    .prizes-grid {
        gap: calc(1.5rem * 0.8);
    }
    
    .prize-item .title {
        font-size: calc(2.25rem * 0.8); /* Scaled down from text-4xl */
    }
    
    .prize-content h3.name {
        font-size: calc(1.5rem * 0.85); /* Scaled down from text-2xl */
        line-height: calc(2 * 0.9);
        padding: calc(8px * 0.8) calc(16px * 0.8);
    }
    
    .prize-content h1 {
        font-size: calc(3.75rem * 0.75); /* Scaled down from text-6xl */
        line-height: calc(60px * 0.8);
    }
    
    .prize-content {
        font-size: calc(1.25rem * 0.85); /* Scaled down from text-xl */
        line-height: calc(2 * 0.9);
        padding: calc(30px * 0.8);
    }
    
    footer {
        padding: 0 calc(16px * 0.8);
    }
    
    .footer-content {
        gap: calc(1rem * 0.8);
    }
    
    .footer-left p {
        font-size: calc(1.125rem * 0.85); /* Scaled down from text-lg */
        line-height: calc(1.75rem * 0.9);
    }
    
    .footer-right p {
        font-size: calc(0.875rem * 0.9); /* Scaled down from text-sm */
        line-height: calc(1.25rem * 0.9);
    }
    
    /* Additional responsive adjustments */
    .checkbox {
        width: calc(30px * 0.8);
        height: calc(30px * 0.8);
    }
    
    .checkbox .check-mark {
        width: calc(16px * 0.8);
        height: calc(12px * 0.8);
    }
    
    .input-group .icon {
        width: calc(120px * 0.8);
    }
    
    .input-group .icon img {
        width: calc(30px * 0.8);
        margin-right: calc(1.2rem * 0.8);
    }

    /* Winners page small mobile styles */
    .winners-title h1 {
        font-size: calc(2.5rem * 0.8);
    }
    
    .prize-title h2 {
        font-size: calc(1.5rem * 0.8);
    }
    
    .winner-name,
    .winner-phone {
        font-size: calc(1.25rem * 0.8);
    }
    
    .header-right a {
        font-size: calc(1.25rem * 0.8);
    }
}