.elementor-4063 .elementor-element.elementor-element-7c05530{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-4063 .elementor-element.elementor-element-78c994e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-4063 .elementor-element.elementor-element-6bdf9f2{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-4063 .elementor-element.elementor-element-515f568{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}/* Start custom CSS for html, class: .elementor-element-baec37e */:root {
    --primary-brand: #3b82f6;
    --border-color: #dee2e6;
    --background-light: #f8f9fa;
    --secondary-gray: #6c757d;
    --success: #10b981;
    --text-primary: #1f2937;
    --text-secondary: #4b5563;
}

/* Base Styles (for a complete, responsive page) */
body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--background-light);
    color: var(--text-primary);
}

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

.page-header {
    text-align: center;
    margin-bottom: 2rem;
    padding-top: 1rem;
}
.page-header h2 { font-size: 2rem; margin-bottom: 0.5rem; color: var(--primary-brand); }
.page-header p { color: var(--secondary-gray); }

/* Buttons & Links */
.btn {
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.2s, opacity 0.2s;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    border: 1px solid transparent;
}
.btn-secondary {
    background: transparent;
    color: var(--secondary-gray);
    border: 1px solid var(--border-color);
}
.btn-secondary:hover {
    background: #e9ecef;
}

#downloadBtn {
    background-color: var(--primary-brand);
    color: white;
    margin-bottom: 10px;
}
#downloadBtn:hover { opacity: 0.9; }

/* New style for the select image button */
.btn-primary-dropzone {
    background-color: var(--primary-brand);
    color: white;
    padding: 0.75rem 2rem;
    border: none;
    font-size: 1.1rem;
    margin-top: 15px;
}
.btn-primary-dropzone:hover {
    background-color: #2563eb; /* A slightly darker blue */
}


.back-to-home-btn { margin-bottom: 20px; }

/* Utility Classes */
.hidden { display: none !important; }
.full-width { width: 100%; }
.divider { height: 1px; background: var(--border-color); margin: 1.5rem 0; }
.form-group { margin-bottom: 1rem; }


/* Drop Zone */
.drop-zone {
    border: 2px dashed var(--border-color); 
    border-radius: 8px; 
    padding: 4rem 2rem;
    text-align: center; 
    cursor: pointer; 
    background: white; 
    transition: background 0.2s;
}
.drop-zone:hover { background: #f0f7ff; border-color: var(--primary-brand); }
.drop-zone p { margin-top: 5px; margin-bottom: 5px; } /* Adjust spacing for 'or' */


/* Layout */
.resize-layout { display: flex; gap: 2rem; align-items: flex-start; }
.workspace { background: white; padding: 2rem; border-radius: 8px; border: 1px solid var(--border-color); }

/* Controls */
.controls-panel {
    flex: 0 0 320px;
    background: var(--background-light);
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.controls-panel h3 { margin-bottom: 1rem; color: var(--text-primary); }

/* Dimensions Group (Flex) */
.dimensions-group {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    margin-bottom: 1rem;
}

.dim-input { flex: 1; }
.dim-input label { display: block; font-size: 0.8rem; font-weight: 600; margin-bottom: 5px; color: var(--text-secondary); }
.form-input { width: 100%; padding: 0.6rem; border: 1px solid var(--border-color); border-radius: 6px; box-sizing: border-box; }

/* Lock Icon */
.lock-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 40px; /* aligns with input */
    color: var(--secondary-gray);
    cursor: pointer;
    transition: color 0.2s;
}
.lock-container:hover { color: var(--primary-brand); }
.lock-container.active { color: var(--primary-brand); }

/* Checkbox */
.checkbox-container { 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    font-size: 0.9rem; 
    cursor: pointer; 
    user-select: none;
}
.checkbox-container input[type="checkbox"] { 
    width: 16px; 
    height: 16px; 
    accent-color: var(--primary-brand); 
    margin: 0;
}

/* Slider */
input[type="range"] { 
    width: 100%; 
    cursor: pointer; 
    accent-color: var(--primary-brand); 
}

/* Stats */
.stats-box {
    background: white;
    padding: 1rem;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    margin-bottom: 1.5rem;
}
.stat-row { display: flex; justify-content: space-between; margin-bottom: 0.5rem; font-size: 0.95rem; color: var(--text-secondary); }
.stat-row:last-child { margin-bottom: 0; }
.stat-val { font-weight: 600; color: var(--text-primary); }
.highlight .stat-val { color: var(--success); } 


/* Preview */
.preview-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.canvas-wrapper {
    width: 100%;
    min-height: 300px;
    background-color: #eee;
    background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%);
    background-size: 20px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    overflow: hidden;
    padding: 20px;
    border: 1px solid var(--border-color);
}

#previewImage {
    max-width: 100%;
    max-height: 500px;
    object-fit: contain;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* Responsive (Tablet/Small Desktop) */
@media (max-width: 800px) {
    .resize-layout { flex-direction: column; }
    .controls-panel { width: 100%; }
    .workspace { padding: 1rem; }
    .drop-zone { padding: 3rem 1rem; }
}

/* Responsive (Mobile) */
@media (max-width: 500px) {
    .dimensions-group {
        flex-direction: column; /* Stack width and height inputs */
        align-items: stretch;
    }
    .lock-container {
        height: 20px; /* Adjust alignment for stacked inputs */
        width: 100%;
        margin: 5px 0;
    }
    .form-input { padding: 0.8rem; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-06a0c16 */:root {
    --primary-brand: #3b82f6;
    --border-color: #dee2e6;
    --background-light: #f8f9fa;
    --secondary-gray: #6c757d;
    --text-primary: #1f2937;
    --text-secondary: #4b5563;
}

/* Base element definitions (assuming a page wrapper exists) */
body {
    font-family: sans-serif;
    color: var(--text-primary);
}
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px; /* Padding for responsive edges */
}


/* --- INFO SECTIONS (Professional and SEO-Friendly Styles) --- */
.info-section {
    background: white;
    padding: 2.5rem;
    border-radius: 8px;
    margin-top: 2rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* Professional, subtle shadow */
}

.info-section h3 {
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.75rem;
    font-size: 1.8rem; /* Large, professional font size */
    color: var(--primary-brand); /* Highlighted primary color */
}

.info-section p { 
    font-size: 1.1rem; 
    line-height: 1.7; 
    color: var(--text-secondary); 
    text-align: justify; /* Proper alignment for professional text blocks */
    margin-bottom: 1.5rem;
}

.info-section p strong {
    font-weight: 700;
}

.how-to-list { 
    padding-left: 20px; 
    margin-top: 1.5rem;
}
.how-to-list li { 
    font-size: 1.1rem; 
    line-height: 1.8; 
    margin-bottom: 1rem; 
    color: var(--text-secondary); 
}
.how-to-list li strong { 
    color: var(--text-primary); 
}

/* FAQ Styling */
.faq-item {
    margin-bottom: 2rem;
    border-left: 4px solid var(--primary-brand);
    padding-left: 1.5rem;
    padding-top: 5px;
}
.faq-item strong { 
    display: block; 
    margin-bottom: 0.5rem; 
    font-size: 1.25rem; /* Enhanced visibility for questions */
    color: var(--text-primary); 
}
.faq-item p { 
    font-size: 1.1rem; 
    color: var(--text-secondary); 
    margin-bottom: 0;
    text-align: left; /* Ensure answer text is left-aligned */
}

/* Responsive Styles for Info Sections */
@media (max-width: 992px) {
    .info-section {
        padding: 2rem;
    }
    .info-section h3 {
        font-size: 1.6rem;
    }
}

@media (max-width: 600px) {
    .info-section {
        padding: 1.5rem;
        margin-top: 1.5rem;
    }
    .info-section h3 {
        font-size: 1.4rem;
        margin-bottom: 1rem;
    }
    .info-section p, .how-to-list li, .faq-item p {
        font-size: 1rem; /* Adjust text size for better mobile readability */
        text-align: left; /* Prefer left alignment on small screens */
    }
    .faq-item strong {
        font-size: 1.1rem;
    }
    .faq-item {
        padding-left: 1rem;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-25cb968 */<style>
/* ============================================================
   UTILIX SIMPLE BLUE DESIGN - PROFESSIONAL & SHARP
   ============================================================ */

.utilix-simple-blue {
    max-width: 1100px;
    margin: 40px auto;
    padding: 0 20px;
    font-family: 'Inter', -apple-system, sans-serif;
}

.utilix-simple-blue h3 {
    font-size: 1.2rem;
    color: #0f172a;
    font-weight: 800;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
    text-align: left;
}

.blue-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.blue-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: #ffffff;
    border: 2px solid #2563eb; /* Strong Blue Border */
    border-radius: 4px; /* Professional Sharp Corners */
    text-decoration: none;
    color: #2563eb; /* Simple Blue Text */
    font-weight: 700;
    font-size: 0.95rem;
    transition: all 0.2s ease-in-out;
}

/* Hover State for Engagement */
.blue-box:hover {
    background: #2563eb;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
}

.s-icon {
    font-size: 1.1rem;
}

/* Mobile Responsiveness */
@media (max-width: 640px) {
    .blue-box {
        padding: 10px 18px;
        font-size: 0.85rem;
        flex: 1 1 auto;
        justify-content: center;
    }
}
</style>/* End custom CSS */