/* 3. Lewa strona - Tekst i Button */
.ui-layer {
    flex: 1 !important;
    order: 1 !important; /* Wymuszenie lewej strony */
    text-align: left !important;
    z-index: 10 !important;
}

/* 4. Prawa strona - Globus */
.canvas-container {
    flex: 1.2 !important; /* Nieco większa kolumna dla globusa */
    order: 2 !important; /* Wymuszenie prawej strony */
    height: 600px !important; /* Wysokość globusa */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    position: relative !important;
}

.canvas-container canvas {
    max-width: 100% !important;
    height: auto !important;
}

/* 5. Stylizacja Nagłówka (Twój Styl) */
.hero-title .stk-block-heading__text {
    font-size: clamp(2.5rem, 6vw, 5rem) !important;
    color: #D1D5DB !important; /* Srebrny tekst */
    font-weight: 900 !important;
    line-height: 1.1 !important;
    margin-bottom: 20px !important;
    text-align: left !important;
}

/* 6. Stylizacja Przycisku (Pasuje do Logo) */
.stk-14b331c .stk-button {
    background-color: #FBBF24 !important; /* Twój Żółty */
    color: #121417 !important;
    border-radius: 5px !important;
    padding: 15px 30px !important;
    font-weight: 700 !important;
    transition: all 0.3s ease !important;
}

.stk-14b331c .stk-button:hover {
    background-color: #f59e0b !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 20px rgba(251, 191, 36, 0.2) !important;
}

/* 7. Responsywność - Na telefonach globus pod tekstem */
@media (max-width: 900px) {

    .hero-title .stk-block-heading__text {
        text-align: center !important;
    }
}