/*==================================================
TEXT FONT CHANGER
PART 1
==================================================*/

.fote-font-page{
    --primary:#5b5ff6;
    --primary-dark:#453ee6;
    --secondary:#eef2ff;
    --dark:#111827;
    --text:#4b5563;
    --border:#e5e7eb;
    --bg:#f8faff;
    --white:#ffffff;
    --success:#22c55e;

    font-family:Inter,sans-serif;
    color:var(--dark);
    background:var(--bg);
}

/* Container */

.fote-font-container{
    width:min(1200px,92%);
    margin:auto;
}

/* Hero */

.fote-font-hero{
    padding:90px 0 70px;
    background:
    radial-gradient(circle at top right,#dbeafe 0%,transparent 45%),
    radial-gradient(circle at bottom left,#ede9fe 0%,transparent 40%),
    #fff;
}

.fote-font-badge{

    display:inline-flex;
    align-items:center;
    gap:8px;

    background:#ede9fe;

    color:#5b21b6;

    padding:10px 18px;

    border-radius:999px;

    font-weight:700;

    font-size:.9rem;

    margin-bottom:22px;

}

.fote-font-hero h1{

    font-size:clamp(2.5rem,5vw,4.4rem);

    line-height:1.1;

    margin:0 0 20px;

    font-weight:800;

    letter-spacing:-1px;

}

.fote-font-hero p{

    max-width:760px;

    font-size:1.12rem;

    color:var(--text);

    line-height:1.8;

}

.fote-font-hero-btn{

    display:inline-flex;

    margin-top:35px;

    background:linear-gradient(135deg,var(--primary),var(--primary-dark));

    color:#fff;

    padding:15px 30px;

    border-radius:12px;

    text-decoration:none;

    font-weight:700;

    transition:.3s;

}

.fote-font-hero-btn:hover{

    transform:translateY(-2px);

    color:#fff;

    box-shadow:0 18px 35px rgba(91,95,246,.25);

}

/* Tool */

.fote-font-tool-section{

    margin-top:-20px;

    padding-bottom:80px;

}

.fote-font-tool-box{

    background:#fff;

    border-radius:22px;

    padding:45px;

    box-shadow:0 20px 55px rgba(15,23,42,.08);

}

.fote-font-tool-header{

    display:flex;

    justify-content:space-between;

    gap:25px;

    align-items:flex-start;

    margin-bottom:35px;

}

.fote-font-section-label{

    display:inline-block;

    background:#eef2ff;

    color:var(--primary);

    padding:8px 16px;

    border-radius:999px;

    font-size:.85rem;

    font-weight:700;

    margin-bottom:15px;

}

.fote-font-tool-header h2{

    margin:0 0 15px;

    font-size:2rem;

}

.fote-font-tool-header p{

    color:var(--text);

    max-width:700px;

    line-height:1.8;

}

.fote-font-status{

    display:flex;

    align-items:center;

    gap:8px;

    background:#ecfdf5;

    color:#166534;

    padding:12px 18px;

    border-radius:999px;

    font-weight:700;

}

.fote-font-status span{

    width:10px;

    height:10px;

    border-radius:50%;

    background:var(--success);

}

/* Input */

.fote-font-input-card{

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

    border-radius:18px;

    padding:28px;

    margin-bottom:35px;

}

.fote-font-input-header{

    display:flex;

    justify-content:space-between;

    gap:20px;

    margin-bottom:18px;

}

.fote-font-input-header label{

    display:block;

    font-size:1.15rem;

    font-weight:700;

    margin-bottom:6px;

}

.fote-font-input-header span{

    color:var(--text);

    font-size:.92rem;

}

.fote-font-input-count{

    color:var(--text);

    font-weight:700;

}

#foteFontInput{

    width:100%;

    min-height:190px;

    resize:vertical;

    border:2px solid #dbe4ff;

    border-radius:14px;

    padding:20px;

    font-size:1.1rem;

    line-height:1.8;

    outline:none;

    transition:.3s;

    background:#fff;

}

#foteFontInput:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 5px rgba(91,95,246,.08);

}

/* Buttons */

.fote-font-input-actions{

    display:flex;

    gap:14px;

    align-items:center;

    flex-wrap:wrap;

    margin-top:22px;

}

.fote-font-sample-btn,
.fote-font-clear-btn{

    border:none;

    cursor:pointer;

    padding:14px 24px;

    border-radius:12px;

    font-weight:700;

    transition:.3s;

}

.fote-font-sample-btn{

    background:linear-gradient(135deg,var(--primary),var(--primary-dark));

    color:#fff;

}

.fote-font-clear-btn{

    background:#f3f4f6;

}

.fote-font-sample-btn:hover{

    transform:translateY(-2px);

}

.fote-font-clear-btn:hover{

    background:#e5e7eb;

}

.fote-font-message{

    color:var(--success);

    font-weight:700;

}

/* Search */

.fote-font-filter-row{

    display:flex;

    justify-content:space-between;

    gap:20px;

    align-items:center;

    margin-bottom:35px;

    flex-wrap:wrap;

}

.fote-font-search-wrap{

    position:relative;

    flex:1;

    min-width:280px;

}

.fote-font-search-icon{

    position:absolute;

    left:18px;

    top:50%;

    transform:translateY(-50%);

    color:#94a3b8;

}

#foteFontSearch{

    width:100%;

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

    border-radius:12px;

    padding:15px 20px 15px 48px;

    outline:none;

    font-size:1rem;

}

#foteFontSearch:focus{

    border-color:var(--primary);

}

.fote-font-result-summary{

    background:#eef2ff;

    color:var(--primary);

    border-radius:12px;

    padding:14px 18px;

    font-weight:700;

}

/* Results */

.fote-font-results{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(330px,1fr));

    gap:22px;

}

.fote-font-result-card{

    background:#fff;

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

    border-radius:18px;

    padding:24px;

    transition:.3s;

}

.fote-font-result-card:hover{

    transform:translateY(-5px);

    box-shadow:0 20px 40px rgba(15,23,42,.08);

}

.fote-font-result-top{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:15px;

    margin-bottom:20px;

}

.fote-font-style-number{

    display:inline-flex;

    background:#eef2ff;

    color:var(--primary);

    border-radius:999px;

    padding:5px 12px;

    font-size:.8rem;

    font-weight:700;

    margin-bottom:8px;

}

.fote-font-result-top h3{

    margin:0;

    font-size:1.15rem;

}

.fote-font-result-top button{

    border:none;

    cursor:pointer;

    padding:10px 16px;

    border-radius:10px;

    background:linear-gradient(135deg,var(--primary),var(--primary-dark));

    color:#fff;

    font-weight:700;

}

.fote-font-output{

    min-height:85px;

    border:1px dashed #cbd5e1;

    border-radius:12px;

    padding:18px;

    font-size:1.18rem;

    word-break:break-word;

    line-height:1.8;

    background:#fafcff;

}
/*==================================================
TEXT FONT CHANGER
PART 2
BENEFITS + STEPS + CONTENT + RELATED TOOLS + FAQ
==================================================*/

/* Generic Section */

.fote-font-section{
    padding:80px 0;
    background:#ffffff;
}

.fote-font-heading{
    max-width:820px;
    margin:0 auto 42px;
    text-align:center;
}

.fote-font-heading h2{
    margin:0 0 16px;
    color:var(--dark);
    font-size:2.3rem;
    line-height:1.3;
    font-weight:800;
}

.fote-font-heading p{
    margin:0 auto;
    max-width:740px;
    color:var(--text);
    font-size:1rem;
    line-height:1.85;
}

/* Benefits */

.fote-font-benefit-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:22px;
}

.fote-font-benefit-card{
    padding:30px 24px;
    text-align:center;
    background:#ffffff;
    border:1px solid var(--border);
    border-radius:18px;
    box-shadow:0 10px 30px rgba(15,23,42,.06);
    transition:.3s ease;
}

.fote-font-benefit-card:hover{
    transform:translateY(-6px);
    border-color:#d8d9ff;
    box-shadow:0 18px 42px rgba(15,23,42,.11);
}

.fote-font-card-icon{
    width:62px;
    height:62px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 18px;
    color:#ffffff;
    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    );
    border-radius:18px;
    font-size:26px;
    font-weight:800;
}

.fote-font-benefit-card h3{
    margin:0 0 12px;
    color:var(--dark);
    font-size:1.2rem;
    font-weight:800;
}

.fote-font-benefit-card p{
    margin:0;
    color:var(--text);
    font-size:.94rem;
    line-height:1.75;
}

/* How It Works */

.fote-font-how{
    max-width:1200px;
    margin:0 auto;
    padding:80px 20px;
    color:#ffffff;
    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(255,255,255,.16),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-dark)
        );
}

.fote-font-heading-light h2{
    color:#ffffff;
}

.fote-font-heading-light p{
    color:#eef2ff;
}

.fote-font-label-light{
    color:#ffffff;
    background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.24);
}

.fote-font-step-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:22px;
}

.fote-font-step-card{
    position:relative;
    overflow:hidden;
    padding:34px 26px;
    color:#111827;
    background:#ffffff;
    border-radius:18px;
    box-shadow:0 14px 34px rgba(15,23,42,.14);
    transition:.3s ease;
}

.fote-font-step-card:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 45px rgba(15,23,42,.2);
}

.fote-font-step-number{
    position:absolute;
    top:16px;
    right:20px;
    color:#ececff;
    font-size:40px;
    line-height:1;
    font-weight:900;
}

.fote-font-step-card h3{
    position:relative;
    margin:0 0 12px;
    color:var(--dark);
    font-size:1.2rem;
    font-weight:800;
}

.fote-font-step-card p{
    position:relative;
    margin:0;
    color:var(--text);
    font-size:.94rem;
    line-height:1.75;
}

/* Content Section */

.fote-font-content-section{
    padding:80px 0;
    background:var(--bg);
}

.fote-font-content-card{
    padding:48px;
    background:#ffffff;
    border:1px solid var(--border);
    border-radius:20px;
    box-shadow:0 18px 45px rgba(15,23,42,.07);
}

.fote-font-content-card h2{
    margin:40px 0 16px;
    color:var(--dark);
    font-size:1.9rem;
    line-height:1.35;
    font-weight:800;
}

.fote-font-content-card h2:first-of-type{
    margin-top:0;
}

.fote-font-content-card p{
    margin:0 0 17px;
    color:var(--text);
    font-size:1rem;
    line-height:1.9;
}

/* Use Grid */

.fote-font-use-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px 18px;
    margin:25px 0 34px;
}

.fote-font-use-item{
    display:flex;
    align-items:center;
    gap:10px;
    padding:14px 15px;
    color:#374151;
    background:#f9fafb;
    border:1px solid var(--border);
    border-radius:12px;
    font-size:.94rem;
    font-weight:700;
}

.fote-font-use-item span{
    flex:0 0 24px;
    width:24px;
    height:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#ffffff;
    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    );
    border-radius:50%;
    font-size:12px;
}

/* Note Box */

.fote-font-note{
    display:flex;
    align-items:flex-start;
    gap:16px;
    margin-top:25px;
    padding:20px;
    background:#fff8e7;
    border:1px solid #f8dda0;
    border-left:5px solid #f59e0b;
    border-radius:13px;
}

.fote-font-note-icon{
    flex:0 0 40px;
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#ffffff;
    background:#f59e0b;
    border-radius:50%;
    font-family:Georgia,serif;
    font-size:20px;
    font-weight:800;
}

.fote-font-note p{
    margin:0;
    color:#78350f;
    font-size:.94rem;
    line-height:1.75;
}

/* Related Tools */

.fote-font-tools-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:20px;
}

.fote-font-tool-card{
    display:block;
    padding:28px 22px;
    text-align:center;
    text-decoration:none !important;
    color:var(--dark);
    background:#ffffff;
    border:1px solid var(--border);
    border-top:5px solid var(--primary);
    border-radius:16px;
    box-shadow:0 10px 26px rgba(15,23,42,.07);
    transition:.3s ease;
}

.fote-font-tool-card:hover{
    transform:translateY(-5px);
    box-shadow:0 18px 38px rgba(15,23,42,.12);
}

.fote-font-tool-card > span{
    width:54px;
    height:54px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 17px;
    color:#ffffff;
    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    );
    border-radius:15px;
    font-size:23px;
    font-weight:800;
}

.fote-font-tool-card strong{
    display:block;
    margin-bottom:10px;
    color:var(--dark);
    font-size:1.05rem;
    font-weight:800;
}

.fote-font-tool-card p{
    margin:0;
    color:var(--text);
    font-size:.88rem;
    line-height:1.7;
}

/* FAQ */

.fote-font-faq-section{
    padding:80px 0;
    background:var(--bg);
}

.fote-font-faq{
    max-width:900px;
    margin:0 auto;
}

.fote-font-faq-item{
    margin-bottom:15px;
    overflow:hidden;
    background:#ffffff;
    border:1px solid var(--border);
    border-radius:15px;
    box-shadow:0 8px 24px rgba(15,23,42,.05);
}

.fote-font-faq-item > button{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:20px 23px;
    color:var(--dark);
    background:#ffffff;
    border:0;
    cursor:pointer;
    text-align:left;
    font-size:1rem;
    font-weight:800;
}

.fote-font-faq-item > button span{
    flex:0 0 34px;
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#ffffff;
    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    );
    border-radius:50%;
    font-size:22px;
    line-height:1;
    transition:.25s ease;
}

.fote-font-faq-answer{
    display:none;
    padding:0 23px 22px;
}

.fote-font-faq-answer p{
    margin:0;
    color:var(--text);
    font-size:.95rem;
    line-height:1.8;
}

.fote-font-faq-item.active .fote-font-faq-answer{
    display:block;
}

.fote-font-faq-item.active > button span{
    transform:rotate(45deg);
}

/* CTA */

.fote-font-cta{
    max-width:1200px;
    margin:0 auto 50px;
    padding:78px 20px;
    text-align:center;
    color:#ffffff;
    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(255,255,255,.16),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-dark)
        );
}

.fote-font-cta h2{
    margin:0 0 18px;
    color:#ffffff;
    font-size:2.5rem;
    line-height:1.2;
    font-weight:800;
}

.fote-font-cta p{
    max-width:720px;
    margin:0 auto 28px;
    color:#eef2ff;
    font-size:1.05rem;
    line-height:1.8;
}

.fote-font-cta a{
    display:inline-block;
    padding:15px 30px;
    color:var(--primary);
    background:#ffffff;
    border-radius:999px;
    text-decoration:none !important;
    font-weight:800;
    transition:.3s ease;
}

.fote-font-cta a:hover{
    transform:translateY(-3px);
}

/* Responsive */

@media(max-width:980px){

    .fote-font-benefit-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .fote-font-step-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .fote-font-tools-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:700px){

    .fote-font-section,
    .fote-font-content-section,
    .fote-font-faq-section{
        padding:56px 0;
    }

    .fote-font-heading h2{
        font-size:1.8rem;
    }

    .fote-font-benefit-grid,
    .fote-font-step-grid,
    .fote-font-use-grid,
    .fote-font-tools-grid{
        grid-template-columns:1fr;
    }

    .fote-font-how{
        padding:58px 15px;
    }

    .fote-font-content-card{
        padding:30px 22px;
    }

    .fote-font-content-card h2{
        font-size:1.55rem;
    }

    .fote-font-note{
        flex-direction:column;
    }

    .fote-font-cta{
        padding:60px 18px;
    }

    .fote-font-cta h2{
        font-size:1.9rem;
    }
}
/*==================================================
TEXT FONT CHANGER
PART 3
==================================================*/

/* ---------- Better Output Box ---------- */

.fote-font-output{

    display:flex;
    align-items:center;

    min-height:90px;

    background:#f8fbff;

    border:2px dashed #dbe4ff;

    border-radius:14px;

    transition:.3s;

    overflow-wrap:anywhere;
    word-break:break-word;

    user-select:all;

}

.fote-font-output:hover{

    border-color:var(--primary);

}

/* ---------- Copy Button ---------- */

.fote-font-result-top button{

    min-width:95px;

    transition:.3s;

}

.fote-font-result-top button:hover{

    transform:translateY(-2px);

    box-shadow:0 10px 20px rgba(91,95,246,.20);

}

/* ---------- Hidden Search ---------- */

.fote-font-result-card.hidden{

    display:none;

}

/* ---------- Scroll ---------- */

.fote-font-results{

    scroll-margin-top:120px;

}

/* ---------- Smooth ---------- */

.fote-font-page *{

    box-sizing:border-box;

}

.fote-font-page{

    scroll-behavior:smooth;

}

/* ---------- Selection ---------- */

.fote-font-page ::selection{

    background:#5b5ff6;

    color:#fff;

}

/* ---------- Better Focus ---------- */

button:focus,
input:focus,
textarea:focus{

    outline:none;

}

/* ---------- Links ---------- */

.fote-font-page a{

    transition:.3s;

}

/* ---------- FAQ ---------- */

.fote-font-faq-item{

    transition:.3s;

}

.fote-font-faq-item.active{

    border-color:#d7dcff;

}

/* ---------- Responsive ---------- */

@media(max-width:991px){

.fote-font-tool-box{

    padding:30px;

}

.fote-font-tool-header{

    flex-direction:column;

}

.fote-font-status{

    width:max-content;

}

}

/* ---------- Tablet ---------- */

@media(max-width:768px){

.fote-font-results{

    grid-template-columns:1fr;

}

.fote-font-filter-row{

    flex-direction:column;

    align-items:stretch;

}

.fote-font-result-summary{

    width:100%;

    text-align:center;

}

.fote-font-input-header{

    flex-direction:column;

}

}

/* ---------- Mobile ---------- */

@media(max-width:576px){

.fote-font-hero{

    padding:65px 0 45px;

}

.fote-font-hero h1{

    font-size:2.2rem;

}

.fote-font-hero p{

    font-size:16px;

}

.fote-font-tool-box{

    padding:18px;

}

.fote-font-input-card{

    padding:18px;

}

#foteFontInput{

    min-height:150px;

    font-size:16px;

}

.fote-font-result-card{

    padding:18px;

}

.fote-font-output{

    min-height:80px;

    font-size:18px;

}

.fote-font-result-top{

    flex-direction:column;

    align-items:flex-start;

}

.fote-font-result-top button{

    width:100%;

}

.fote-font-heading h2{

    font-size:30px;

}

.fote-font-content-card{

    padding:22px;

}

.fote-font-tool-card{

    padding:22px;

}

.fote-font-cta h2{

    font-size:32px;

}

}

/* ---------- Animation ---------- */

.fote-font-result-card,
.fote-font-benefit-card,
.fote-font-step-card,
.fote-font-tool-card{

    animation:foteFade .45s ease;

}

@keyframes foteFade{

from{

opacity:0;

transform:translateY(12px);

}

to{

opacity:1;

transform:translateY(0);

}

}