body {

    margin:
        0;

}

/* =========================================
   GLOBAL SMARTMYTOOLS STYLES
========================================= */


/* =========================================
   MAIN HEADER
========================================= */

.main-header {

    background:
        #24476b;

    min-height:
        60px;

    display:
        flex;

    align-items:
        center;
}


.header-container {

    width:
        100%;

    max-width:
        1200px;

    margin:
        0 auto;

    padding:
        0 24px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;
}


.logo {

    text-decoration:
        none;
}


.logo img {

    display:
        block;

    height:
        55px;

    width:
        auto;
}


.main-navigation {

    display:
        flex;

    align-items:
        center;

    gap:
        30px;
}


.main-navigation a {

    color:
        white;

    text-decoration:
        none;

    font-size:
        16px;
}

/* =========================================
   GLOBAL FOOTER
========================================= */

.site-footer {

    background:
        #eef1f5;

    border-top:
        1px solid #d8dee8;

    padding:
        24px;

    text-align:
        center;

}


.footer-links {

    display:
        flex;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        12px;

    margin-bottom:
        12px;

}


.footer-links a {

    color:
        #2d3e50;

    text-decoration:
        none;

    font-size:
        14px;

}


.footer-links a:hover {

    text-decoration:
        underline;

}


.site-footer p {

    margin:
        0;

    color:
        #4b5563;

    font-size:
        14px;

}

/* =========================================
   TOOL INFORMATION SECTIONS
========================================= */

.tool-information {

    padding:
        50px 24px;

}


.info-container {

    max-width:
        1100px;

    margin:
        0 auto;

}


.tool-information h2 {

    color:
        #2d3e50;

    font-size:
        30px;

    margin:
        0 0 28px;

}


.steps-grid {

    display:
        grid;

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

    gap:
        20px;

}


.step-card {

    background:
        white;

    border:
        1px solid #d8dee8;

    border-radius:
        12px;

    padding:
        24px;

}


.step-number {

    width:
        38px;

    height:
        38px;

    border-radius:
        50%;

    background:
        #24476b;

    color:
        white;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-weight:
        700;

    margin-bottom:
        14px;

}


.step-card h3 {

    color:
        #2d3e50;

    margin:
        0 0 10px;

}


.step-card p {

    color:
        #4b5563;

    line-height:
        1.7;

    margin:
        0;

}


.about-section {

    padding-top:
        20px;

}


.about-section p {

    color:
        #4b5563;

    line-height:
        1.8;

    margin:
        0 0 14px;

}


.faq-section {

    padding-top:
        20px;

}


.faq-item {

    padding:
        20px 0;

    border-bottom:
        1px solid #d8dee8;

}


.faq-item h3 {

    color:
        #2d3e50;

    margin:
        0 0 10px;

}


.faq-item p {

    color:
        #4b5563;

    line-height:
        1.7;

    margin:
        0;

}

/* =========================================
   MOBILE MAIN HEADER
========================================= */

@media (max-width: 700px) {

    .main-header {
        min-height: auto;
    }

    .header-container {
        width: 100%;
        padding: 8px 8px;

        display: flex;
        flex-direction: column;

        align-items: center;
        justify-content: center;

        gap: 6px;

        box-sizing: border-box;
    }

    .logo img {
        height: 42px;
        width: auto;
    }

    .main-navigation {
        width: 100%;

        display: flex;
        align-items: center;
        justify-content: center;

        flex-wrap: wrap;

        gap: 6px 12px;
    }

    .main-navigation a {
        font-size: 13px;
        white-space: nowrap;
    }

}