/* =========================================================
   BHARATUPDATES
   COMMON TOOLS + SEO LANDING PAGE CSS
   ========================================================= */


/* =========================================================
   1. ROOT VARIABLES
   ========================================================= */

:root {

    --tools-primary: #1769aa;
    --tools-primary-dark: #0d4f82;
    --tools-primary-light: #eaf4fb;

    --tools-secondary: #f5f7fa;

    --tools-success: #198754;
    --tools-success-dark: #146c43;

    --tools-danger: #dc3545;
    --tools-warning: #f59e0b;

    --tools-text: #222;
    --tools-text-light: #666;
    --tools-heading: #17202a;

    --tools-border: #dfe3e8;
    --tools-border-dark: #c8ced6;

    --tools-white: #ffffff;
    --tools-black: #111111;

    --tools-page-bg: #f7f9fc;
    --tools-card-bg: #ffffff;

    --tools-radius: 10px;
    --tools-radius-small: 7px;

    --tools-shadow:
        0 4px 18px rgba(0, 0, 0, 0.06);

    --tools-shadow-hover:
        0 8px 24px rgba(0, 0, 0, 0.10);

    --tools-max-width: 1100px;

    --tools-transition:
        all 0.2s ease;

}


/* =========================================================
   2. GLOBAL RESET
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;
    padding: 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color: var(--tools-text);

    background:
        var(--tools-page-bg);

    line-height: 1.7;

    font-size: 16px;
}


img {
    max-width: 100%;
}


button,
input,
textarea,
select {
    font-family: inherit;
}


button {
    cursor: pointer;
}


/* =========================================================
   3. LINKS
   ========================================================= */

a {
    color: var(--tools-primary);
    text-decoration: none;

    transition:
        var(--tools-transition);
}


a:hover {
    color: var(--tools-primary-dark);
}


a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid rgba(23, 105, 170, 0.25);
    outline-offset: 2px;
}


/* =========================================================
   4. COMMON PAGE CONTAINER
   ========================================================= */

.seo-page,
.tools-page,
.tool-page,
.page-container {

    width: 100%;

    max-width:
        var(--tools-max-width);

    margin:
        0 auto;

    padding:
        20px;

}


/* =========================================================
   5. SEO HERO
   ========================================================= */

.seo-hero {

    padding:
        45px 25px;

    margin-bottom:
        20px;

    text-align:
        center;

    background:
        var(--tools-white);

    border:
        1px solid var(--tools-border);

    border-radius:
        var(--tools-radius);

    box-shadow:
        var(--tools-shadow);

}


.seo-hero h1 {

    margin:
        0 auto 16px;

    max-width:
        900px;

    color:
        var(--tools-heading);

    font-size:
        clamp(1.8rem, 4vw, 2.5rem);

    line-height:
        1.3;

}


.seo-hero p {

    max-width:
        820px;

    margin:
        0 auto 18px;

    color:
        var(--tools-text-light);

    font-size:
        1.05rem;

}


.seo-hero p:last-of-type {
    margin-bottom: 25px;
}


/* =========================================================
   6. COMMON SECTION
   ========================================================= */

.seo-section {

    margin:
        42px 0;

}


.seo-section h2 {

    margin:
        0 0 16px;

    color:
        var(--tools-heading);

    font-size:
        clamp(1.45rem, 3vw, 1.9rem);

    line-height:
        1.35;

}


.seo-section h3 {

    margin:
        28px 0 10px;

    color:
        var(--tools-heading);

    font-size:
        1.25rem;

    line-height:
        1.4;

}


.seo-section p {

    margin:
        0 0 16px;

}


.seo-section ul,
.seo-section ol {

    margin-top:
        10px;

    margin-bottom:
        20px;

}


.seo-section li {
    margin-bottom: 7px;
}


/* =========================================================
   7. COMMON BUTTON SYSTEM
   ========================================================= */

.tool-cta,
.invoice-btn,
.tools-btn,
.tool-button,
button.tools-btn,
a.tools-btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    min-height:
        44px;

    padding:
        11px 20px;

    border:
        1px solid transparent;

    border-radius:
        var(--tools-radius-small);

    font-size:
        15px;

    font-weight:
        700;

    line-height:
        1.3;

    text-align:
        center;

    text-decoration:
        none;

    transition:
        var(--tools-transition);

    cursor:
        pointer;

}


/* =========================================================
   PRIMARY BUTTON
   ========================================================= */

.tool-cta.primary,
.tools-btn.primary,
.tool-button.primary,
.invoice-btn.primary {

    background:
        var(--tools-primary);

    color:
        var(--tools-white);

    border-color:
        var(--tools-primary);

}


.tool-cta.primary:hover,
.tools-btn.primary:hover,
.tool-button.primary:hover,
.invoice-btn.primary:hover {

    background:
        var(--tools-primary-dark);

    color:
        var(--tools-white);

    border-color:
        var(--tools-primary-dark);

    transform:
        translateY(-1px);

    box-shadow:
        var(--tools-shadow);

}


/* =========================================================
   SECONDARY BUTTON
   ========================================================= */

.tool-cta.secondary,
.tools-btn.secondary,
.tool-button.secondary,
.invoice-btn.secondary {

    background:
        var(--tools-white);

    color:
        var(--tools-primary);

    border-color:
        var(--tools-primary);

}


.tool-cta.secondary:hover,
.tools-btn.secondary:hover,
.tool-button.secondary:hover,
.invoice-btn.secondary:hover {

    background:
        var(--tools-primary-light);

    color:
        var(--tools-primary-dark);

}


/* =========================================================
   SUCCESS BUTTON
   ========================================================= */

.tools-btn.success,
.tool-button.success,
.invoice-btn.success {

    background:
        var(--tools-success);

    color:
        var(--tools-white);

    border-color:
        var(--tools-success);

}


.tools-btn.success:hover,
.tool-button.success:hover,
.invoice-btn.success:hover {

    background:
        var(--tools-success-dark);

    border-color:
        var(--tools-success-dark);

    color:
        var(--tools-white);

}


/* =========================================================
   DANGER BUTTON
   ========================================================= */

.tools-btn.danger,
.tool-button.danger,
.invoice-btn.danger {

    background:
        var(--tools-danger);

    color:
        var(--tools-white);

    border-color:
        var(--tools-danger);

}


.tools-btn.danger:hover,
.tool-button.danger:hover,
.invoice-btn.danger:hover {

    background:
        #b02a37;

    border-color:
        #b02a37;

}


/* =========================================================
   LIGHT BUTTON
   ========================================================= */

.tools-btn.light,
.tool-button.light,
.invoice-btn.light {

    background:
        #f1f3f5;

    color:
        var(--tools-text);

    border-color:
        var(--tools-border);

}


.tools-btn.light:hover,
.tool-button.light:hover,
.invoice-btn.light:hover {

    background:
        #e5e7eb;

}


/* =========================================================
   DISABLED BUTTON
   ========================================================= */

button:disabled,
.tools-btn:disabled,
.tool-button:disabled,
.invoice-btn:disabled {

    opacity:
        0.55;

    cursor:
        not-allowed;

    transform:
        none;

    box-shadow:
        none;

}


/* =========================================================
   CTA BUTTON GROUP
   ========================================================= */

.tool-cta-group,
.button-row,
.tools-button-row {

    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        10px;

    margin:
        20px 0;

}


.tool-cta-group.center,
.button-row.center,
.tools-button-row.center {

    justify-content:
        center;

}


/* =========================================================
   8. FEATURE GRID
   ========================================================= */

.feature-grid {

    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        18px;

    margin-top:
        20px;

}


/* =========================================================
   FEATURE CARD
   ========================================================= */

.feature-card {

    padding:
        22px;

    background:
        var(--tools-card-bg);

    border:
        1px solid var(--tools-border);

    border-radius:
        var(--tools-radius);

    box-shadow:
        var(--tools-shadow);

    transition:
        var(--tools-transition);

}


.feature-card:hover {

    transform:
        translateY(-2px);

    box-shadow:
        var(--tools-shadow-hover);

}


.feature-card h3 {

    margin:
        0 0 10px;

    color:
        var(--tools-heading);

}


.feature-card p {

    margin:
        0;

    color:
        var(--tools-text-light);

}


/* =========================================================
   9. GENERIC CARD
   ========================================================= */

.tools-card {

    background:
        var(--tools-white);

    border:
        1px solid var(--tools-border);

    border-radius:
        var(--tools-radius);

    padding:
        22px;

    box-shadow:
        var(--tools-shadow);

}


/* =========================================================
   10. HOW TO STEPS
   ========================================================= */

.steps {

    counter-reset:
        step;

    list-style:
        none;

    margin:
        20px 0;

    padding:
        0;

}


.steps li {

    counter-increment:
        step;

    position:
        relative;

    margin-bottom:
        14px;

    padding:
        20px 20px 20px 65px;

    background:
        var(--tools-white);

    border:
        1px solid var(--tools-border);

    border-radius:
        var(--tools-radius);

    box-shadow:
        var(--tools-shadow);

}


.steps li::before {

    content:
        counter(step);

    position:
        absolute;

    left:
        18px;

    top:
        19px;

    width:
        32px;

    height:
        32px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        var(--tools-primary);

    color:
        var(--tools-white);

    font-weight:
        700;

}


.steps li strong {

    display:
        block;

    margin-bottom:
        5px;

    color:
        var(--tools-heading);

}


.steps li p {

    margin:
        5px 0 12px;

}


/* =========================================================
   11. SCREENSHOT CONTAINER
   ========================================================= */

.screenshot-box {

    margin:
        25px 0;

    padding:
        15px;

    text-align:
        center;

    background:
        var(--tools-white);

    border:
        2px dashed var(--tools-border-dark);

    border-radius:
        var(--tools-radius);

}


.screenshot-box img {

    display:
        block;

    width:
        100%;

    height:
        auto;

    max-width:
        1000px;

    margin:
        0 auto;

    border:
        1px solid var(--tools-border);

    border-radius:
        8px;

}


.screenshot-caption {

    margin:
        12px 0 0;

    color:
        var(--tools-text-light);

    font-size:
        0.9rem;

}


/* =========================================================
   12. INFO BOX
   ========================================================= */

.info-box {

    margin:
        22px 0;

    padding:
        18px 20px;

    background:
        var(--tools-primary-light);

    border-left:
        4px solid var(--tools-primary);

    border-radius:
        0 var(--tools-radius-small) var(--tools-radius-small) 0;

}


.info-box p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   13. WARNING BOX
   ========================================================= */

.warning-box {

    margin:
        22px 0;

    padding:
        18px 20px;

    background:
        #f8f8f8;

    border-left:
        4px solid #777;

    border-radius:
        0 var(--tools-radius-small) var(--tools-radius-small) 0;

}


/* =========================================================
   14. SUCCESS / RESULT BOX
   ========================================================= */

.success-box {

    margin:
        20px 0;

    padding:
        18px 20px;

    background:
        #eef8f2;

    border:
        1px solid #b9dfc8;

    border-radius:
        var(--tools-radius);

}


.result-box {

    margin:
        20px 0;

    padding:
        20px;

    background:
        var(--tools-white);

    border:
        1px solid var(--tools-border);

    border-radius:
        var(--tools-radius);

    box-shadow:
        var(--tools-shadow);

}


/* =========================================================
   15. ADVERTISEMENT SLOT
   ========================================================= */

.ad-slot,
.seo-ad-slot {

    width:
        100%;

    min-height:
        90px;

    margin:
        30px 0;

    padding:
        15px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    background:
        #fafafa;

    border:
        1px dashed #bbb;

    border-radius:
        var(--tools-radius-small);

}


.ad-slot span,
.seo-ad-slot span {

    color:
        #777;

    font-size:
        0.82rem;

}


/* =========================================================
   16. AFFILIATE BOX
   ========================================================= */

.affiliate-box {

    margin:
        30px 0;

    padding:
        22px;

    background:
        var(--tools-white);

    border:
        1px solid var(--tools-border);

    border-radius:
        var(--tools-radius);

    box-shadow:
        var(--tools-shadow);

}


.affiliate-box h2,
.affiliate-box h3 {

    margin-top:
        0;

}


.affiliate-box a {

    font-weight:
        600;

}


/* =========================================================
   17. FINAL CTA
   ========================================================= */

.final-cta {

    margin:
        45px 0;

    padding:
        40px 25px;

    text-align:
        center;

    background:
        var(--tools-primary-light);

    border:
        1px solid #d4e8f5;

    border-radius:
        var(--tools-radius);

}


.final-cta h2 {

    margin:
        0 0 12px;

    color:
        var(--tools-heading);

}


.final-cta p {

    max-width:
        700px;

    margin:
        0 auto 20px;

    color:
        var(--tools-text-light);

}


/* =========================================================
   18. RELATED TOOLS
   ========================================================= */

.related-tools {

    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        12px;

}


.related-tools a {

    display:
        block;

    padding:
        15px 18px;

    background:
        var(--tools-white);

    border:
        1px solid var(--tools-border);

    border-radius:
        var(--tools-radius-small);

    font-weight:
        600;

    transition:
        var(--tools-transition);

}


.related-tools a:hover {

    border-color:
        var(--tools-primary);

    background:
        var(--tools-primary-light);

    transform:
        translateY(-1px);

}


/* =========================================================
   19. FAQ
   ========================================================= */

.faq-item {

    margin-bottom:
        16px;

    padding:
        20px;

    background:
        var(--tools-white);

    border:
        1px solid var(--tools-border);

    border-radius:
        var(--tools-radius);

}


.faq-item h3 {

    margin:
        0 0 10px;

    color:
        var(--tools-heading);

}


.faq-item p {

    margin:
        0;

    color:
        var(--tools-text-light);

}


/* =========================================================
   20. TABLE
   ========================================================= */

.table-wrapper {

    width:
        100%;

    overflow-x:
        auto;

    margin:
        20px 0;

}


.comparison-table,
.tools-table {

    width:
        100%;

    min-width:
        600px;

    border-collapse:
        collapse;

    background:
        var(--tools-white);

}


.comparison-table th,
.comparison-table td,
.tools-table th,
.tools-table td {

    padding:
        12px 14px;

    text-align:
        left;

    vertical-align:
        top;

    border:
        1px solid var(--tools-border);

}


.comparison-table th,
.tools-table th {

    background:
        #f2f5f8;

    color:
        var(--tools-heading);

    font-weight:
        700;

}


/* =========================================================
   21. FORM ELEMENTS
   ========================================================= */

.tools-input,
.invoice-input,
.tool-input,
.tools-select,
.tool-select,
.tools-textarea,
.tool-textarea {

    width:
        100%;

    min-height:
        44px;

    padding:
        10px 12px;

    background:
        var(--tools-white);

    color:
        var(--tools-text);

    border:
        1px solid var(--tools-border-dark);

    border-radius:
        var(--tools-radius-small);

    font-size:
        15px;

    transition:
        var(--tools-transition);

}


.tools-textarea,
.tool-textarea {

    min-height:
        130px;

    resize:
        vertical;

}


.tools-input:hover,
.invoice-input:hover,
.tool-input:hover,
.tools-select:hover,
.tool-select:hover,
.tools-textarea:hover,
.tool-textarea:hover {

    border-color:
        #9da6b1;

}


.tools-input:focus,
.invoice-input:focus,
.tool-input:focus,
.tools-select:focus,
.tool-select:focus,
.tools-textarea:focus,
.tool-textarea:focus {

    border-color:
        var(--tools-primary);

    outline:
        none;

    box-shadow:
        0 0 0 3px rgba(23, 105, 170, 0.12);

}


/* =========================================================
   22. LABEL
   ========================================================= */

.tools-label,
.tool-label,
.invoice-label {

    display:
        block;

    margin-bottom:
        6px;

    color:
        var(--tools-heading);

    font-size:
        14px;

    font-weight:
        700;

}


/* =========================================================
   23. REQUIRED FIELD
   ========================================================= */

.required,
.required-star {

    color:
        var(--tools-danger);

    font-weight:
        700;

}


/* =========================================================
   24. TOOL PANEL
   ========================================================= */

.tool-panel {

    margin:
        20px 0;

    padding:
        22px;

    background:
        var(--tools-white);

    border:
        1px solid var(--tools-border);

    border-radius:
        var(--tools-radius);

    box-shadow:
        var(--tools-shadow);

}


/* =========================================================
   25. TOOL HEADER
   ========================================================= */

.tool-header {

    margin-bottom:
        22px;

    text-align:
        center;

}


.tool-header h1 {

    margin:
        0 0 10px;

    color:
        var(--tools-heading);

    font-size:
        clamp(1.6rem, 4vw, 2.2rem);

}


.tool-header p {

    margin:
        0;

    color:
        var(--tools-text-light);

}


/* =========================================================
   26. GRID UTILITIES
   ========================================================= */

.tools-grid {

    display:
        grid;

    gap:
        18px;

}


.tools-grid-2 {

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

}


.tools-grid-3 {

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

}


.tools-grid-4 {

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

}


/* =========================================================
   27. FLEX UTILITIES
   ========================================================= */

.tools-flex {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px;

}


.tools-flex-center {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        12px;

}


/* =========================================================
   28. BADGES
   ========================================================= */

.tools-badge {

    display:
        inline-flex;

    align-items:
        center;

    padding:
        5px 10px;

    border-radius:
        999px;

    background:
        var(--tools-primary-light);

    color:
        var(--tools-primary-dark);

    font-size:
        13px;

    font-weight:
        700;

}


.tools-badge.success {

    background:
        #eaf7ef;

    color:
        var(--tools-success-dark);

}


.tools-badge.warning {

    background:
        #fff6df;

    color:
        #8a5a00;

}


.tools-badge.danger {

    background:
        #fdebed;

    color:
        #a52834;

}


/* =========================================================
   29. STATUS / MESSAGE
   ========================================================= */

.tools-message {

    margin:
        15px 0;

    padding:
        12px 15px;

    border-radius:
        var(--tools-radius-small);

    font-size:
        14px;

}


.tools-message.success {

    background:
        #eaf7ef;

    color:
        #146c43;

    border:
        1px solid #b9dfc8;

}


.tools-message.error {

    background:
        #fdebed;

    color:
        #a52834;

    border:
        1px solid #f1b8bf;

}


.tools-message.warning {

    background:
        #fff6df;

    color:
        #8a5a00;

    border:
        1px solid #f1d48a;

}


.tools-message.info {

    background:
        var(--tools-primary-light);

    color:
        var(--tools-primary-dark);

    border:
        1px solid #c7e2f3;

}


/* =========================================================
   30. UPLOAD AREA
   ========================================================= */

.tools-upload-area {

    padding:
        35px 20px;

    text-align:
        center;

    background:
        #fafcff;

    border:
        2px dashed var(--tools-border-dark);

    border-radius:
        var(--tools-radius);

    cursor:
        pointer;

    transition:
        var(--tools-transition);

}


.tools-upload-area:hover {

    background:
        var(--tools-primary-light);

    border-color:
        var(--tools-primary);

}


.tools-upload-area.dragover {

    background:
        var(--tools-primary-light);

    border-color:
        var(--tools-primary);

}


.tools-upload-icon {

    font-size:
        2.2rem;

    margin-bottom:
        8px;

}


.tools-upload-area strong {

    display:
        block;

    margin-bottom:
        5px;

    color:
        var(--tools-heading);

}


.tools-upload-area small {

    color:
        var(--tools-text-light);

}


/* =========================================================
   31. LIST / RESULT ITEMS
   ========================================================= */

.tools-list {

    margin:
        0;

    padding:
        0;

    list-style:
        none;

}


.tools-list li {

    padding:
        10px 0;

    border-bottom:
        1px solid var(--tools-border);

}


.tools-list li:last-child {
    border-bottom: none;
}


/* =========================================================
   32. RESULT SCORE
   ========================================================= */

.tools-score {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-direction:
        column;

    min-width:
        130px;

    min-height:
        130px;

    padding:
        20px;

    background:
        var(--tools-primary-light);

    border:
        1px solid #c7e2f3;

    border-radius:
        50%;

    text-align:
        center;

}


.tools-score-value {

    color:
        var(--tools-primary-dark);

    font-size:
        2rem;

    font-weight:
        800;

    line-height:
        1;

}


.tools-score-label {

    margin-top:
        7px;

    color:
        var(--tools-text-light);

    font-size:
        12px;

}


/* =========================================================
   33. PROGRESS BAR
   ========================================================= */

.tools-progress {

    width:
        100%;

    height:
        10px;

    overflow:
        hidden;

    background:
        #e9ecef;

    border-radius:
        999px;

}


.tools-progress-bar {

    height:
        100%;

    width:
        0;

    background:
        var(--tools-primary);

    border-radius:
        inherit;

    transition:
        width 0.3s ease;

}


/* =========================================================
   34. EMPTY STATE
   ========================================================= */

.tools-empty {

    padding:
        35px 20px;

    text-align:
        center;

    color:
        var(--tools-text-light);

    background:
        #fafafa;

    border:
        1px dashed var(--tools-border-dark);

    border-radius:
        var(--tools-radius);

}


/* =========================================================
   35. LOADING
   ========================================================= */

.tools-loading {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    padding:
        20px;

    color:
        var(--tools-text-light);

}


.tools-spinner {

    width:
        22px;

    height:
        22px;

    border:
        3px solid #dce3e9;

    border-top-color:
        var(--tools-primary);

    border-radius:
        50%;

    animation:
        tools-spin 0.8s linear infinite;

}


@keyframes tools-spin {

    to {
        transform:
            rotate(360deg);
    }

}


/* =========================================================
   36. FOOTER SAFE SPACING
   ========================================================= */

#footer {

    margin-top:
        50px;

}


/* =========================================================
   37. WHATSAPP BUTTON
   ========================================================= */

#whatsapp-share {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        52px;

    height:
        52px;

    padding:
        0 !important;

    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.18);

    transition:
        var(--tools-transition);

}


#whatsapp-share:hover {

    transform:
        translateY(-3px) scale(1.04);

    box-shadow:
        0 7px 20px rgba(0, 0, 0, 0.22);

}


#whatsapp-share img {

    width:
        25px;

    height:
        25px;

}


/* =========================================================
   38. PRINT
   ========================================================= */

@media print {

    #header,
    #footer,
    #whatsapp-share,
    .ad-slot,
    .seo-ad-slot,
    .tool-cta,
    .tools-btn {

        display:
            none !important;

    }


    body {

        background:
            #fff;

    }


    .seo-page,
    .tools-page,
    .tool-page {

        max-width:
            none;

        padding:
            0;

    }


    .seo-section {

        margin:
            20px 0;

    }

}


/* =========================================================
   39. TABLET
   ========================================================= */

@media (max-width: 900px) {

    .tools-grid-4 {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }

}


/* =========================================================
   40. MOBILE
   ========================================================= */

@media (max-width: 700px) {

    body {

        font-size:
            15px;

    }


    .seo-page,
    .tools-page,
    .tool-page,
    .page-container {

        padding:
            14px;

    }


    .seo-hero {

        padding:
            30px 16px;

        border-radius:
            8px;

    }


    .seo-hero h1 {

        font-size:
            1.75rem;

    }


    .seo-hero p {

        font-size:
            0.98rem;

    }


    .seo-section {

        margin:
            32px 0;

    }


    .seo-section h2 {

        font-size:
            1.45rem;

    }


    .seo-section h3 {

        font-size:
            1.15rem;

    }


    .feature-grid {

        grid-template-columns:
            1fr;

    }


    .related-tools {

        grid-template-columns:
            1fr;

    }


    .tools-grid-2,
    .tools-grid-3,
    .tools-grid-4 {

        grid-template-columns:
            1fr;

    }


    .button-row,
    .tools-button-row,
    .tool-cta-group {

        flex-direction:
            column;

        align-items:
            stretch;

    }


    .button-row > *,
    .tools-button-row > *,
    .tool-cta-group > * {

        width:
            100%;

    }


    .tool-cta {

        width:
            100%;

        margin:
            6px 0;

    }


    .steps li {

        padding:
            18px 15px 18px 55px;

    }


    .screenshot-box {

        padding:
            10px;

    }


    .tool-panel,
    .tools-card {

        padding:
            16px;

    }


    .final-cta {

        padding:
            30px 16px;

    }


    .ad-slot,
    .seo-ad-slot {

        min-height:
            80px;

    }


    #whatsapp-share {

        width:
            48px;

        height:
            48px;

        bottom:
            18px !important;

        right:
            18px !important;

    }

}


/* =========================================================
   41. VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 400px) {

    .seo-hero h1 {

        font-size:
            1.5rem;

    }


    .seo-section h2 {

        font-size:
            1.3rem;

    }


    .feature-card {

        padding:
            16px;

    }


    .steps li {

        padding-left:
            52px;

    }


    .steps li::before {

        left:
            14px;

    }

}