html, body, ul, li { margin: 0px; padding: 0px; list-style: none;}
img { border: 0px;}
a { text-decoration: none;}
a:hover { text-decoration: underline;}
.textleft { text-align: left;}
.textleft a { color: #686454;}
.clear { clear: both;}
body, html {
    max-width: 100%;
    overflow-x: hidden;
    background: white;
}
body { 
    background: white; 
    text-align: center; 
    font: 11px verdana, arial, sans-serif;
    margin: 0;
    padding: 0;
}

#wrapper { 
    position: relative; 
    padding-top: 10px; 
    text-align: left; 
    margin: 0 auto; 
    width: 100%; 
    max-width: 940px;
    box-sizing: border-box;
    min-height: 100vh; /* Ensures wrapper takes full height */
    display: flex;
    flex-direction: column;
}

/* Navigation - Full width with proper containment */
#nav { 
    padding: 8px 10px;
    text-align: right;
    width: 100%;
    max-width: 950px;
    margin: 0 auto;
    box-sizing: border-box;
}

#nav a { 
    display: inline-block;
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 15px; 
    padding: 0 10px; 
    text-decoration: none; 
    color: #686454; 
    font-weight: bolder; 
    text-align: center;
}

#nav a:hover { color: #14538E;}

/* Main content area - flex container for columns */
#body {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    padding: 0 10px;
    flex: 1; /* Takes available space */
}

/* LEFT COLUMN - FACE SCANNER ONLY */
#left-column { 
    flex: 0 0 450px;
    max-width: 450px;
    text-align: center; 
    color: #686454; 
    background: transparent;
    min-height: auto;
    box-sizing: border-box;
}

/* RIGHT COLUMN - IQ TEST CONTENT */
#right-column { 
    flex: 1 1 463px;
    max-width: 463px;
    padding-left: 15px; 
    padding-right: 10px; 
    padding-top: 23px; 
    color: #686454; 
    background-color: #dee3ef;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* Center the logo */
#right-column .logo {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 40px;
    width: 100%;
}

#right-column .logo img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    height: auto;
}

/* IQ INFORMATION - Auto height based on content */
#iq-info {
    margin-top: 40px;
    padding: 20px 15px;
    border-top: 2px solid #F7F3F3;
    width: 100%;
    box-sizing: border-box;
    background-color: #14538E;
    color: #bbc0c6;
    border-radius: 8px;
    height: auto; /* Auto height based on content */
    min-height: fit-content; /* Ensures it only takes needed space */
    margin-bottom: 20px; /* Healthy space below */
}

#iq-info p { 
    margin: 0 19px 15px 19px; /* Added bottom margin for spacing */
}

#iq-info .textleft { 
    margin: 10px 10px 20px 10px; /* Reduced margins */
    padding: 2px;
    text-align: justify;
    color: #bbc0c6;
    line-height: 1.5; /* Better line height for readability */
}

#iq-info .percent { 
    font-size: 12px; 
    font-weight: bolder; 
    margin-top: 20px; /* Reduced from 40px */
    margin-bottom: 10px; 
    color: #e9e4d0;
}

/* First percent element should have less top margin */
#iq-info .percent:first-of-type {
    margin-top: 5px;
}

/* Footer - Now placed below right column */
#footer { 
    font: 11px arial, sans-serif; 
    color: #333333; 
    text-align: right; 
    background-color: #F7F3F3;
    padding: 10px 15px;
    margin-top: 20px;
    width: 100%;
    box-sizing: border-box;
    clear: both;
    /* Align with right column width */
    max-width: 463px;
    margin-left: auto; /* Push to the right */
    margin-right: 10px; /* Align with right column */
    border-radius: 4px; /* Optional: adds slight rounding */
}

#footer p { 
    margin: 0;
    padding: 0;
}

/* Keep all other existing styles */
.ad { padding-left: 300px; padding-top: 23px; margin-bottom: 20px; color: #686454;}
.adstop { text-align: left; margin-bottom: 20px; margin-top: 20px; font-size: 15px; font-family: "Verdana"; font-weight: normal; color: #336699; }
.adstophppp { text-align: left; margin-bottom: 20px; margin-top: 20px; font-size: 15px; font-family: "Verdana"; font-weight: normal; color: #336699; }
.logo2 { text-align: center; margin-bottom: 20px; margin-top: 20px; font-size: 15px; font-family: "BankGothic Md BT"; font-weight: bold; color: #336699;}
.flags { text-align: center; margin-bottom: 60px;}
.fineline { border-bottom: 2px solid #F7F3F3; margin-top: 10px;}
.quickiqtest { font-family: Verdana; font-size: 12px; font-weight: bold; margin-bottom: 30px; margin-top: 0px;}
#instructions { margin-top: 40px; font-family: Verdana; font-size: 12px; font-weight: bold; color: #000000; font-weight: bold;}
.text { font-family: Verdana; font-size: 11px; font-weight: normal; color: #000033; margin-bottom: 30px;}
div.text ul { margin: 1.5em; margin-top: 0.2em; margin-bottom: 0;}
div.text ul li { line-height: 17px; background-image: url(/graphic/odrazka.gif); background-repeat: no-repeat; padding-left: 1.6em;  display: block;}
.start { font-family: Verdana; color: #D80000; font-weight: bold; font-size: 18px; text-decoration: none; text-align: center; margin-bottom: 80px;}
.start A:link { text-decoration: none; color: #D80000;}
.start A:visited { text-decoration: none; color: #D80000;}
.start A:active { text-decoration: none; color: #D80000;}
.start A:hover { color: red;}
.validation { margin-top: 10px; text-align: right;}
.green { color:#405B33;}
.blue { color:#3584A5;}
.countdown { text-align:center; color:#212421; font-weight:bold; font-size:20px; }
#share1 { float:right;}#addshare { padding-left:70px; margin-bottom:10px; color:#000000;}
input.calculator { width: 25px; height: 25px; text-align: center; padding: 0px;}
.firstdiscount {
position:center;font-weight:bold;font-size:17px;
}
.getcertificate { display:flex; align-items:center; gap:12px; font-size:16px;font-weight:600;max-width:600px; padding-top:10px;}
.getcertificate img { width:100px;object-fit:cover;flex-shrink:0; }
.getcertificate { cursor:pointer; color:#000033; } 
.getcertificate:hover { color:#14538E; }
.getcertificate img { vertical-align: middle; }

/* Face Scanner Styles */
.face-scanner-container {
    background: linear-gradient(145deg,#1c1c1c,#111) !important;
    padding: 30px !important;
    max-width: 400px !important;
    margin: 20px auto !important;
    border-radius: 15px !important;
    box-shadow: 0 0 10px #328FCE !important;
    position: relative !important;
    overflow: hidden !important;
    color: #e0e0e0 !important;
    width: auto !important;
    float: none !important;
    clear: both !important;
}

.container{
    background:linear-gradient(145deg,#1c1c1c,#111);
    padding:30px;
    max-width:350px;
    margin:auto;
    border-radius:15px;
    box-shadow:0 0 10px #328FCE;
    position:relative;
    overflow:hidden;
}

h1{
    font-family: 'Arial', sans-serif;
    color:#ffffff;
    margin:10px 0 20px;
    font-size: 40px;
}
h2{
    font-family: 'Arial', sans-serif;
    color:#328FCE;
    letter-spacing:1px;
    font-size: 18px;
}

.drag-area{
    border:2px dashed #328FCE;
    border-radius:10px;
    padding:30px;
    margin-top:20px;
    cursor:pointer;
    transition:0.3s;
    background: rgba(0,255,255,0.05);
    font-size: 14px;
}

.drag-area.hover{
    background: rgba(0,255,255,0.2);
}

#preview{
    max-width:350px;
    margin-top:20px;
    border-radius:10px;
    display:block;
}

canvas{
    position:absolute;
    top:0;
    left:0;
}

button{
    padding:12px 30px;
    margin-top:20px;
    cursor:pointer;
    font-size:16px;
    border:none;
    border-radius:8px;
    background: linear-gradient(90deg,#0ff,#00f);
    color:#000;
    font-weight:bold;
    transition:0.3s;
}

button:hover{
    background: linear-gradient(90deg,#00f,#0ff);
    color:#fff;
}

#result{
    margin-top:20px;
    text-align:left;
    font-size:11px;
    line-height:1.5;
    color: #ffffffde;
}

#scan-overlay{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    pointer-events:none;
    overflow:hidden;
}

.scan-bar{
    position:absolute;
    left:0;
    width:100%;
    height:4px;
    background: linear-gradient(90deg,transparent,#0ff,transparent);
    animation: scanMove 2s linear infinite;
}

@keyframes scanMove{
    0%{top:0;}
    100%{top:100%;}
}

#progress{
    position:absolute;
    top:10px;
    right:10px;
    font-family: 'Orbitron', sans-serif;
    font-size:14px;
    color:#0ff;
}

#raceField {
    background: yellow;
    color: black;
    animation: blink 1s linear infinite;
}

@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0.15; }
    100% { opacity: 1; }
}

#goldenRatioContainer {
    width: 100%;
    margin-top: 10px;
}

/* ... rest of face scanner styles remain the same ... */

@media screen and (max-width: 1000px) {
    #wrapper {
        max-width: 100% !important;
        padding: 10px !important;
        box-sizing: border-box !important;
    }
    
    #body {
        padding: 0 !important;
    }
    
    #left-column {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        float: none !important;
        padding: 10px !important;
        box-sizing: border-box !important;
        margin-right: 0 !important;
    }
    
    #right-column {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        float: none !important;
        padding: 10px !important;
        box-sizing: border-box !important;
    }
    
    #footer {
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

@media screen and (max-width: 730px) {
    /* ... existing mobile styles ... */
}