/* =====================================================
   CONVERTER BY JUNAIDGROWTH
   MAIN STYLESHEET
   PART 1
===================================================== */

/*==========================
RESET
==========================*/

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    background:#f5f8ff;
    color:#222;
    overflow-x:hidden;
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
}

img{
    max-width:100%;
    display:block;
}

a{
    text-decoration:none;
    color:inherit;
}

ul{
    list-style:none;
}

button,
input{
    font-family:inherit;
}

/*==========================
ROOT VARIABLES
==========================*/

:root{

    --primary:#2563eb;
    --primary-dark:#1d4ed8;

    --secondary:#7c3aed;

    --accent:#ef4444;

    --success:#10b981;

    --dark:#0f172a;

    --text:#334155;

    --white:#ffffff;

    --light:#f8fafc;

    --border:#e5e7eb;

    --radius:22px;

    --radius-sm:12px;

    --shadow:

        0 15px 35px rgba(37,99,235,.12);

    --glass:

        rgba(255,255,255,.72);

    --transition:

        .35s ease;

}

/*==========================
SCROLLBAR
==========================*/

::-webkit-scrollbar{

    width:11px;

}

::-webkit-scrollbar-thumb{

    background:linear-gradient(

        180deg,

        var(--primary),

        var(--secondary)

    );

    border-radius:20px;

}

::-webkit-scrollbar-track{

    background:#edf2ff;

}

/*==========================
CONTAINER
==========================*/

.container{

    width:min(1200px,92%);

    margin:auto;

}

/*==========================
HEADINGS
==========================*/

h1,h2,h3,h4{

    color:var(--dark);

    font-weight:700;

    line-height:1.25;

}

h1{

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

}

h2{

    font-size:clamp(2rem,4vw,3rem);

}

h3{

    font-size:1.3rem;

}

p{

    color:var(--text);

}

/*==========================
SECTION
==========================*/

section{

    padding:90px 0;

    position:relative;

}

/*==========================
SECTION TITLE
==========================*/

.section-title{

    text-align:center;

    margin-bottom:60px;

}

.section-title span{

    display:inline-block;

    background:rgba(37,99,235,.1);

    color:var(--primary);

    padding:10px 22px;

    border-radius:50px;

    font-size:.9rem;

    font-weight:600;

    margin-bottom:18px;

}

.section-title h2{

    margin-bottom:18px;

}

.section-title p{

    max-width:700px;

    margin:auto;

}

/*==========================
BUTTONS
==========================*/

.primary-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    background:linear-gradient(

        135deg,

        var(--primary),

        var(--secondary)

    );

    color:#fff;

    padding:16px 34px;

    border-radius:999px;

    font-weight:600;

    transition:var(--transition);

    box-shadow:

        0 15px 35px rgba(37,99,235,.25);

}

.primary-btn:hover{

    transform:translateY(-4px);

    box-shadow:

        0 25px 45px rgba(37,99,235,.35);

}

.secondary-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:16px 34px;

    border:2px solid var(--primary);

    color:var(--primary);

    border-radius:999px;

    font-weight:600;

    transition:var(--transition);

    background:#fff;

}

.secondary-btn:hover{

    background:var(--primary);

    color:#fff;

}

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

header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:999;

    backdrop-filter:blur(18px);

    background:rgba(255,255,255,.75);

    border-bottom:1px solid rgba(255,255,255,.3);

    transition:.3s;

}
/*==================================
Compatibility for current HTML
==================================*/

/*==================================
HEADER NAVIGATION
==================================*/

.navbar,
.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 82px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

nav {
    margin-left: auto;
}

nav ul,
.nav-links {
    display: flex;
    align-items: center;
    gap: 30px;
    margin: 0;
    padding: 0;
}

nav ul li {
    list-style: none;
}

nav ul li a {
    color: var(--dark);
    font-weight: 600;
    transition: .3s;
    position: relative;
    white-space: nowrap;
}

nav ul li a:hover,
nav ul li a.active {
    color: var(--primary);
}

nav ul li a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 0;
    height: 2px;
    background: var(--primary);
    transition: .3s;
}

nav ul li a:hover::after,
nav ul li a.active::after {
    width: 100%;
}

/*==========================
LOGO
==========================*/

.logo i{
    width:56px;
    height:56px;
    border-radius:50%;
    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:24px;
    box-shadow:0 12px 30px rgba(37,99,235,.35);
}


.logo span{

    color:var(--dark);

    font-size:1.25rem;

}

.logo-icon{

    width:56px;

    height:56px;

    border-radius:50%;

    background:linear-gradient(

        135deg,

        var(--primary),

        var(--secondary)

    );

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:24px;

    box-shadow:

        0 12px 30px rgba(37,99,235,.35);

}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-text {
    display: flex;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
}

.logo-text h2 {
    font-size: 1.4rem;
    margin: 0;
    line-height: 1;
}

.logo-text span {
    font-size: .82rem;
    color: #64748b;
    margin: 0;
    line-height: 1;
}


/*==========================
NAVIGATION
==========================*/

.nav-links,
nav ul{

    display:flex;

    align-items:center;

    gap:34px;

}

.nav-links li,
nav ul li{

    position:relative;

}

.nav-links a,
nav ul li a{

    color:var(--dark);

    font-weight:500;

    transition:.3s;

}

.nav-links a:hover,
nav ul li a:hover{

    color:var(--primary);

}

/*==========================
DROPDOWN
==========================*/

.dropdown-menu{

    position:absolute;

    top:170%;

    left:0;

    min-width:260px;

    background:#fff;

    border-radius:20px;

    padding:16px;

    box-shadow:

        0 20px 45px rgba(15,23,42,.12);

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    transition:.35s;

}

.dropdown:hover .dropdown-menu{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.dropdown-menu a{

    display:block;

    padding:12px 16px;

    border-radius:12px;

    transition:.3s;

}

.dropdown-menu a:hover{

    background:#eef4ff;

    color:var(--primary);

}

/*==========================
MOBILE MENU ICON
==========================*/

.mobile-menu{

    display:none;

    width:52px;

    height:52px;

    border-radius:50%;

    background:#fff;

    box-shadow:var(--shadow);

    align-items:center;

    justify-content:center;

    cursor:pointer;

    font-size:22px;

}

/*==========================
HERO
==========================*/

.hero{

    padding-top:170px;

    background:

        radial-gradient(circle at top right,#dbeafe 0%,transparent 40%),

        radial-gradient(circle at bottom left,#ede9fe 0%,transparent 45%),

        #f8fbff;

}

.hero-grid{

    display:grid;

    grid-template-columns:1.1fr .9fr;

    align-items:center;

    gap:70px;

}

.badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 22px;

    border-radius:999px;

    background:rgba(37,99,235,.08);

    color:var(--primary);

    font-weight:600;

    margin-bottom:25px;

}

.hero p{

    font-size:1.1rem;

    margin:25px 0 35px;

    max-width:650px;

}

/*==========================
SEARCH
==========================*/

.hero-search{

    display:flex;

    background:#fff;

    border-radius:60px;

    overflow:hidden;

    box-shadow:var(--shadow);

    margin-bottom:35px;

}

.hero-search input{

    flex:1;

    border:none;

    outline:none;

    padding:20px 28px;

    font-size:1rem;

    background:transparent;

}

.hero-search button{

    width:72px;

    border:none;

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

    color:#fff;

    cursor:pointer;

    font-size:20px;

}

/*==========================
HERO BUTTON GROUP
==========================*/

.hero-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

    margin-bottom:45px;

}
/*=====================================================
HERO STATS
=====================================================*/

.hero-stats{

    display:grid;

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

    gap:20px;

}

.stat{

    background:rgba(255,255,255,.75);

    backdrop-filter:blur(15px);

    border:1px solid rgba(255,255,255,.4);

    border-radius:22px;

    padding:25px 20px;

    text-align:center;

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

    transition:var(--transition);

}

.stat:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 50px rgba(37,99,235,.18);

}

.stat h3{

    font-size:2rem;

    color:var(--primary);

    margin-bottom:8px;

}

.stat span{

    color:#64748b;

    font-size:.92rem;

    font-weight:500;

}

/*=====================================================
HERO IMAGE
=====================================================*/

.hero-image{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}

.hero-image img{

    width:100%;

    max-width:540px;

    animation:floatImage 6s ease-in-out infinite;

    filter:drop-shadow(0 35px 60px rgba(37,99,235,.20));

}

.hero-image::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        rgba(37,99,235,.18),
        rgba(124,58,237,.15)
    );

    filter:blur(50px);

    z-index:-1;

}

@keyframes floatImage{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-18px);

    }

    100%{

        transform:translateY(0);

    }

}

/*=====================================================
POPULAR TOOLS
=====================================================*/

.popular-tools{

    background:#ffffff;

}

.tool-grid{

    display:grid;

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

    gap:32px;

}

/*=====================================================
TOOL CARD
=====================================================*/

.tool-card{

    position:relative;

    overflow:hidden;

    background:rgba(255,255,255,.78);

    backdrop-filter:blur(18px);

    border-radius:28px;

    padding:35px;

    border:1px solid rgba(255,255,255,.35);

    transition:.4s;

    box-shadow:

        0 20px 45px rgba(15,23,42,.08);

}

.tool-card::before{

    content:"";

    position:absolute;

    top:-80px;

    right:-80px;

    width:170px;

    height:170px;

    border-radius:50%;

    background:linear-gradient(

        135deg,

        rgba(37,99,235,.15),

        rgba(124,58,237,.12)

    );

    transition:.45s;

}

.tool-card:hover{

    transform:translateY(-12px);

    box-shadow:

        0 30px 60px rgba(37,99,235,.16);

}

.tool-card:hover::before{

    transform:scale(1.4);

}

.tool-icon{

    width:78px;

    height:78px;

    border-radius:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:24px;

    color:#fff;

    font-size:30px;

    background:linear-gradient(

        135deg,

        var(--primary),

        var(--secondary)

    );

    box-shadow:

        0 18px 35px rgba(37,99,235,.22);

}

.tool-card h3{

    margin-bottom:14px;

    font-size:1.35rem;

}

.tool-card p{

    margin-bottom:26px;

    color:#64748b;

    min-height:72px;

}

.tool-card span{

    display:inline-flex;

    align-items:center;

    gap:10px;

    font-weight:600;

    color:var(--primary);

    transition:.3s;

}

.tool-card:hover span{

    gap:16px;

}

/*=====================================================
CATEGORY SECTION
=====================================================*/

.categories{

    background:#f6f9ff;

}

.category-grid{

    display:grid;

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

    gap:28px;

}

.category-card{

    background:#fff;

    padding:38px 30px;

    text-align:center;

    border-radius:26px;

    transition:.35s;

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

}

.category-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 55px rgba(37,99,235,.15);

}

.category-card i{

    width:90px;

    height:90px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:auto auto 25px;

    font-size:34px;

    color:#fff;

    background:linear-gradient(

        135deg,

        var(--primary),

        var(--secondary)

    );

}

.category-card h3{

    margin-bottom:14px;

}

/*=====================================================
COMMON GLASS CARD
=====================================================*/

.glass-card{

    background:rgba(255,255,255,.72);

    backdrop-filter:blur(16px);

    border:1px solid rgba(255,255,255,.35);

    border-radius:26px;

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

}

/*=====================================================
HOVER EFFECT
=====================================================*/

.lift{

    transition:.35s;

}

.lift:hover{

    transform:translateY(-10px);

}

/*=====================================================
GRADIENT TEXT
=====================================================*/

.gradient-text{

    background:linear-gradient(

        135deg,

        var(--primary),

        var(--secondary)

    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    background-clip:text;

}

/*=====================================================
SECTION DIVIDER
=====================================================*/

.wave-divider{

    position:absolute;

    bottom:-2px;

    left:0;

    width:100%;

    overflow:hidden;

    line-height:0;

}

.wave-divider svg{

    width:100%;

    height:110px;

}

/*=====================================================
FLOATING BLOBS
=====================================================*/

.blob{

    position:absolute;

    border-radius:50%;

    filter:blur(40px);

    opacity:.25;

    z-index:-1;

}

.blob.one{

    width:280px;

    height:280px;

    background:#3b82f6;

    top:120px;

    left:-90px;

}

.blob.two{

    width:320px;

    height:320px;

    background:#7c3aed;

    right:-110px;

    top:400px;

}

.blob.three{

    width:220px;

    height:220px;

    background:#ef4444;

    bottom:0;

    left:30%;

}
/*=====================================================
WHY CHOOSE US
=====================================================*/

.why-us{

    background:#ffffff;

}

.features-grid{

    display:grid;

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

    gap:30px;

}

.feature{

    position:relative;

    background:#fff;

    padding:40px 30px;

    border-radius:28px;

    overflow:hidden;

    transition:.35s;

    border:1px solid rgba(37,99,235,.08);

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

}

.feature:hover{

    transform:translateY(-12px);

    box-shadow:0 25px 55px rgba(37,99,235,.18);

}

.feature::before{

    content:"";

    position:absolute;

    width:170px;

    height:170px;

    border-radius:50%;

    background:linear-gradient(

        135deg,

        rgba(37,99,235,.08),

        rgba(124,58,237,.08)

    );

    right:-80px;

    top:-80px;

}

.feature i{

    width:80px;

    height:80px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:20px;

    color:#fff;

    font-size:30px;

    margin-bottom:25px;

    background:linear-gradient(

        135deg,

        var(--primary),

        var(--secondary)

    );

}

.feature h3{

    margin-bottom:15px;

}

.feature p{

    color:#64748b;

}

/*=====================================================
HOW IT WORKS
=====================================================*/

.how-it-works{

    background:#f7faff;

}

.steps{

    display:grid;

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

    gap:35px;

}

.step{

    background:#fff;

    border-radius:30px;

    padding:45px 35px;

    text-align:center;

    position:relative;

    transition:.35s;

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

}

.step:hover{

    transform:translateY(-10px);

}

.step-number{

    width:80px;

    height:80px;

    margin:auto;

    margin-bottom:25px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:32px;

    font-weight:700;

    background:linear-gradient(

        135deg,

        var(--primary),

        var(--secondary)

    );

    box-shadow:0 20px 35px rgba(37,99,235,.25);

}

.step h3{

    margin-bottom:14px;

}

/*=====================================================
STATISTICS
=====================================================*/

.statistics{

    background:linear-gradient(

        135deg,

        #2563eb,

        #7c3aed

    );

    color:#fff;

}

.stats-grid{

    display:grid;

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

    gap:25px;

}

.counter-card{

    text-align:center;

    padding:40px 20px;

    background:rgba(255,255,255,.10);

    backdrop-filter:blur(15px);

    border-radius:28px;

    border:1px solid rgba(255,255,255,.18);

}

.counter-card h2{

    color:#fff;

    font-size:3rem;

    margin-bottom:12px;

}

.counter-card p{

    color:rgba(255,255,255,.92);

}

/*=====================================================
LATEST TOOLS
=====================================================*/

.latest-tools{

    background:#fff;

}

.latest-grid{

    display:grid;

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

    gap:30px;

}

.latest-card{

    background:#fff;

    border-radius:28px;

    padding:35px;

    transition:.35s;

    border:1px solid rgba(37,99,235,.08);

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

}

.latest-card:hover{

    transform:translateY(-10px);

}

.latest-card i{

    width:75px;

    height:75px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    color:#fff;

    font-size:28px;

    margin-bottom:25px;

    background:linear-gradient(

        135deg,

        var(--primary),

        var(--secondary)

    );

}

.latest-card h3{

    margin-bottom:15px;

}

.latest-card p{

    margin-bottom:22px;

}

.latest-card a{

    color:var(--primary);

    font-weight:600;

}

/*=====================================================
SEO CONTENT
=====================================================*/

.seo-content{

    background:#f8fbff;

}

.seo-content h2{

    margin-bottom:25px;

}

.seo-content h3{

    margin:40px 0 18px;

}

.seo-content p{

    margin-bottom:20px;

    color:#475569;

}

.seo-content ul{

    margin-left:20px;

}

.seo-content li{

    margin-bottom:12px;

    color:#334155;

    list-style:disc;

}

/*=====================================================
CTA
=====================================================*/

.cta{

    background:linear-gradient(

        135deg,

        var(--primary),

        var(--secondary)

    );

    text-align:center;

    color:#fff;

    border-radius:40px;

    width:min(1200px,92%);

    margin:100px auto;

    padding:90px 50px;

}

.cta h2{

    color:#fff;

    margin-bottom:18px;

}

.cta p{

    color:rgba(255,255,255,.92);

    margin-bottom:35px;

    font-size:1.05rem;

}

.cta .primary-btn{

    background:#fff;

    color:var(--primary);

}

.cta .primary-btn:hover{

    color:#fff;

    background:var(--dark);

}
/*=====================================================
FAQ SECTION
=====================================================*/

.faq{

    background:#ffffff;

    position:relative;

}

.faq-container{

    max-width:900px;

    margin:0 auto;

}

.faq-item{

    background:#fff;

    border-radius:24px;

    margin-bottom:22px;

    overflow:hidden;

    border:1px solid rgba(37,99,235,.08);

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

    transition:.35s;

}

.faq-item:hover{

    transform:translateY(-6px);

    box-shadow:0 25px 50px rgba(37,99,235,.12);

}

.faq-item h3{

    position:relative;

    padding:24px 70px 24px 28px;

    font-size:1.08rem;

    cursor:pointer;

    transition:.3s;

}

.faq-item h3::after{

    content:"+";

    position:absolute;

    right:28px;

    top:50%;

    transform:translateY(-50%);

    width:34px;

    height:34px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

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

    color:#fff;

    font-size:20px;

    font-weight:700;

}

.faq-item.active h3::after{

    content:"−";

}

.faq-item summary{
    position:relative;
    padding:24px 55px 24px 28px;
    font-size:1.08rem;
    font-weight:500;
    cursor:pointer;
    list-style:none;
}

.faq-item summary::-webkit-details-marker{
    display:none;
}

.faq-item summary::after{
    content:"+";
    position:absolute;
    right:28px;
    top:50%;
    transform:translateY(-50%);
    width:34px;
    height:34px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );
    color:#fff;
    font-size:20px;
    font-weight:700;
}

.faq-item[open] summary::after{
    content:"−";
}

.faq-item .faq-answer{
    padding:0 28px 24px;
    color:#64748b;
    line-height:1.7;
}

.faq-item .faq-answer p{
    max-height:none;
    overflow:visible;
    padding:0;
    margin:0;
}

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

footer{

    background:#0f172a;

    color:#cbd5e1;

    padding:90px 0 30px;

    position:relative;

    overflow:hidden;

}

footer::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(37,99,235,.12);

    filter:blur(90px);

    left:-150px;

    top:-120px;

}

footer::after{

    content:"";

    position:absolute;

    width:380px;

    height:380px;

    border-radius:50%;

    background:rgba(124,58,237,.10);

    filter:blur(90px);

    right:-150px;

    bottom:-120px;

}

.footer-grid{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1fr;

    gap:50px;

}

.footer-grid h3{

    color:#fff;

    margin-bottom:22px;

    font-size:1.5rem;

}

.footer-grid h4{

    color:#fff;

    margin-bottom:22px;

    font-size:1.1rem;

}

.footer-grid p{

    color:#94a3b8;

    line-height:1.8;

}

.footer-grid ul{

    padding:0;

}

.footer-grid li{

    margin-bottom:14px;

}

.footer-grid a{

    color:#94a3b8;

    transition:.3s;

}

.footer-grid a:hover{

    color:#fff;

    padding-left:8px;

}

/*=====================================================
SOCIAL ICONS
=====================================================*/

.social-icons{

    display:flex;

    gap:16px;

    margin-top:20px;

}

.social-icons a{

    width:48px;

    height:48px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(255,255,255,.08);

    color:#fff;

    font-size:18px;

    transition:.35s;

    border:1px solid rgba(255,255,255,.08);

}

.social-icons a:hover{

    transform:translateY(-6px) rotate(8deg);

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

}

/*=====================================================
FOOTER DIVIDER
=====================================================*/

footer hr{

    margin:60px 0 25px;

    border:none;

    height:1px;

    background:rgba(255,255,255,.10);

}

.copyright{

    text-align:center;

    color:#94a3b8;

    font-size:.95rem;

}

/*=====================================================
NEWSLETTER (OPTIONAL)
=====================================================*/

.newsletter{

    display:flex;

    margin-top:30px;

    background:rgba(255,255,255,.08);

    border-radius:999px;

    overflow:hidden;

}

.newsletter input{

    flex:1;

    border:none;

    outline:none;

    padding:18px 24px;

    background:transparent;

    color:#fff;

}

.newsletter input::placeholder{

    color:#94a3b8;

}

.newsletter button{

    border:none;

    padding:0 28px;

    cursor:pointer;

    color:#fff;

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

    transition:.3s;

}

.newsletter button:hover{

    filter:brightness(1.08);

}
/*=====================================================
BACK TO TOP BUTTON
=====================================================*/

.back-to-top{

    position:fixed;

    right:30px;

    bottom:30px;

    width:58px;

    height:58px;

    border-radius:50%;

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

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

    box-shadow:0 20px 45px rgba(37,99,235,.28);

    cursor:pointer;

    opacity:0;

    visibility:hidden;

    transform:translateY(25px);

    transition:.35s;

    z-index:999;

}

.back-to-top.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.back-to-top:hover{

    transform:translateY(-6px);

    box-shadow:0 30px 55px rgba(37,99,235,.35);

}

/*=====================================================
PAGE LOADER
=====================================================*/

.loader{

    position:fixed;

    inset:0;

    background:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:99999;

    transition:.5s;

}

.loader.hidden{

    opacity:0;

    visibility:hidden;

}

.loader-circle{

    width:70px;

    height:70px;

    border-radius:50%;

    border:6px solid rgba(37,99,235,.15);

    border-top:6px solid var(--primary);

    animation:spinLoader 1s linear infinite;

}

@keyframes spinLoader{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/*=====================================================
TEXT SELECTION
=====================================================*/

::selection{

    background:var(--primary);

    color:#fff;

}

/*=====================================================
FOCUS STATES
=====================================================*/

button:focus,

input:focus,

textarea:focus,

select:focus,

a:focus{

    outline:none;

    box-shadow:0 0 0 4px rgba(37,99,235,.18);

}

/*=====================================================
UTILITY CLASSES
=====================================================*/

.text-center{

    text-align:center;

}

.text-left{

    text-align:left;

}

.text-right{

    text-align:right;

}

.d-flex{

    display:flex;

}

.align-center{

    align-items:center;

}

.justify-center{

    justify-content:center;

}

.space-between{

    justify-content:space-between;

}

.flex-column{

    flex-direction:column;

}

.flex-wrap{

    flex-wrap:wrap;

}

.gap-10{

    gap:10px;

}

.gap-20{

    gap:20px;

}

.gap-30{

    gap:30px;

}

.mt-20{

    margin-top:20px;

}

.mt-40{

    margin-top:40px;

}

.mt-60{

    margin-top:60px;

}

.mb-20{

    margin-bottom:20px;

}

.mb-40{

    margin-bottom:40px;

}

.mb-60{

    margin-bottom:60px;

}

.w-100{

    width:100%;

}

/*=====================================================
GLASS UTILITIES
=====================================================*/

.glass{

    background:rgba(255,255,255,.72);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.35);

}

.shadow{

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

}

.radius{

    border-radius:28px;

}

/*=====================================================
SCROLL REVEAL
=====================================================*/

.reveal{

    opacity:0;

    transform:translateY(45px);

    transition:1s ease;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}

/*=====================================================
FADE ANIMATIONS
=====================================================*/

.fade-up{

    animation:fadeUp .8s ease both;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.fade-left{

    animation:fadeLeft .8s ease both;

}

@keyframes fadeLeft{

    from{

        opacity:0;

        transform:translateX(-35px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

.fade-right{

    animation:fadeRight .8s ease both;

}

@keyframes fadeRight{

    from{

        opacity:0;

        transform:translateX(35px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

/*=====================================================
FLOAT ANIMATION
=====================================================*/

.float{

    animation:floating 5s ease-in-out infinite;

}

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}

/*=====================================================
ROTATE ANIMATION
=====================================================*/

.rotate{

    animation:rotateSlow 14s linear infinite;

}

@keyframes rotateSlow{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/*=====================================================
PULSE EFFECT
=====================================================*/

.pulse{

    animation:pulse 2.5s infinite;

}

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.05);

    }

    100%{

        transform:scale(1);

    }

}

/*=====================================================
SKELETON LOADER
=====================================================*/

.skeleton{

    position:relative;

    overflow:hidden;

    background:#edf2f7;

}

.skeleton::after{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.6),

        transparent

    );

    animation:skeleton 1.5s infinite;

}

@keyframes skeleton{

    100%{

        left:100%;

    }

}

/*=====================================================
TOAST NOTIFICATION
=====================================================*/

.toast{

    position:fixed;

    top:25px;

    right:25px;

    min-width:300px;

    padding:18px 22px;

    background:#fff;

    border-left:5px solid var(--success);

    border-radius:18px;

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

    transform:translateX(400px);

    transition:.4s;

    z-index:9999;

}

.toast.show{

    transform:translateX(0);

}
/*=====================================================
RESPONSIVE DESIGN
PART 4C
=====================================================*/

/*==============================
1400px
==============================*/

@media (max-width:1400px){

.container{

    width:min(1140px,92%);

}

.hero-grid{

    gap:50px;

}

}

/*==============================
1200px
==============================*/

@media (max-width:1200px){

.hero-grid{

    grid-template-columns:1fr;

    text-align:center;

}

.hero p{

    margin-left:auto;
    margin-right:auto;

}

.hero-buttons{

    justify-content:center;

}

.hero-search{

    max-width:650px;
    margin:35px auto;

}

.hero-image{

    margin-top:30px;

}

.hero-stats{

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

}

.stats-grid{

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

}

.steps{

    grid-template-columns:1fr;

}

.footer-grid{

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

    gap:40px;

}

}

/*==============================
992px
==============================*/

@media (max-width:992px){

section{

    padding:80px 0;

}

.nav-links{

    position:fixed;

    top:82px;

    left:-100%;

    width:300px;

    height:calc(100vh - 82px);

    background:#fff;

    flex-direction:column;

    align-items:flex-start;

    padding:40px 30px;

    gap:20px;

    transition:.35s;

    box-shadow:0 15px 40px rgba(0,0,0,.1);

    overflow-y:auto;

}

.nav-links.active{

    left:0;

}

.mobile-menu{

    display:flex;

}

.dropdown-menu{

    position:static;

    opacity:1;

    visibility:visible;

    transform:none;

    box-shadow:none;

    padding:10px 0 0 15px;

    display:none;

    background:transparent;

}

.dropdown.active .dropdown-menu{

    display:block;

}

.hero{

    padding-top:140px;

}

.hero-stats{

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

}

.features-grid{

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

}

.tool-grid{

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

}

.category-grid{

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

}

.latest-grid{

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

}

}

/*==============================
768px
==============================*/

@media (max-width:768px){

h1{

    font-size:2.4rem;

}

h2{

    font-size:2rem;

}

.hero{

    padding-top:130px;

}

.hero-search{

    flex-direction:column;

    border-radius:22px;

}

.hero-search input{

    padding:18px;

}

.hero-search button{

    width:100%;

    height:58px;

}

.hero-buttons{

    flex-direction:column;

    align-items:center;

}

.primary-btn,
.secondary-btn{

    width:100%;

    max-width:320px;

}

.hero-stats{

    grid-template-columns:1fr;

}

.tool-grid{

    grid-template-columns:1fr;

}

.category-grid{

    grid-template-columns:1fr;

}

.features-grid{

    grid-template-columns:1fr;

}

.latest-grid{

    grid-template-columns:1fr;

}

.stats-grid{

    grid-template-columns:1fr;

}

.footer-grid{

    grid-template-columns:1fr;

}

.step{

    padding:35px 25px;

}

.counter-card{

    padding:30px;

}

.cta{

    padding:70px 25px;

    border-radius:30px;

}

}

/*==============================
576px
==============================*/

@media (max-width:576px){

.container{

    width:92%;

}

.logo-text h2{

    font-size:1.1rem;

}

.logo-text span{

    font-size:.75rem;

}

.hero{

    padding-top:120px;

}

.badge{

    font-size:.82rem;

    padding:10px 18px;

}

.hero p{

    font-size:1rem;

}

.tool-card{

    padding:28px;

}

.feature{

    padding:30px 24px;

}

.category-card{

    padding:30px 24px;

}

.latest-card{

    padding:30px;

}

.faq-item h3{

    padding:22px 60px 22px 22px;

    font-size:1rem;

}

.faq-item h3::after{

    right:20px;

}

.back-to-top{

    width:50px;

    height:50px;

    right:20px;

    bottom:20px;

    font-size:18px;

}

.newsletter{

    flex-direction:column;

    border-radius:20px;

}

.newsletter input{

    width:100%;

}

.newsletter button{

    width:100%;

    padding:16px;

}

}

/*==============================
420px
==============================*/

@media (max-width:420px){

h1{

    font-size:2rem;

}

h2{

    font-size:1.7rem;

}

.section-title{

    margin-bottom:40px;

}

.logo-icon{

    width:46px;

    height:46px;

    font-size:20px;

}

.mobile-menu{

    width:46px;

    height:46px;

}

.hero-search{

    margin-top:25px;

}

.primary-btn,
.secondary-btn{

    font-size:.95rem;

    padding:15px 24px;

}

.counter-card h2{

    font-size:2.2rem;

}

}

/*==============================
LANDSCAPE PHONES
==============================*/

@media (max-height:500px){

.hero{

    padding-top:100px;

}

.nav-links{

    overflow-y:auto;

}

}

/*==============================
LARGE DESKTOP
==============================*/

@media (min-width:1600px){

.container{

    max-width:1400px;

}

.hero-grid{

    gap:80px;

}

}
/*=====================================================
PART 4D
DARK MODE • ANIMATIONS • ACCESSIBILITY • PRINT
=====================================================*/

/*==============================
SMOOTH FADE-IN
==============================*/

.fade-in{
    opacity:0;
    animation:fadeIn .8s ease forwards;
}

@keyframes fadeIn{
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}

/*==============================
ZOOM IN
==============================*/

.zoom-in{
    animation:zoomIn .6s ease;
}

@keyframes zoomIn{
    from{
        opacity:0;
        transform:scale(.9);
    }
    to{
        opacity:1;
        transform:scale(1);
    }
}

/*==============================
HOVER GLOW
==============================*/

.glow:hover{

    box-shadow:
    0 0 0 1px rgba(37,99,235,.15),
    0 15px 35px rgba(37,99,235,.25),
    0 0 40px rgba(37,99,235,.18);

}

/*==============================
GRADIENT BORDER
==============================*/

.gradient-border{

    position:relative;

    border-radius:28px;

}

.gradient-border::before{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:inherit;

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

    z-index:-1;

}

/*==============================
IMAGE HOVER
==============================*/

img{

    transition:.35s;

}

.hover-image:hover img{

    transform:scale(1.05);

}

/*==============================
LINK UNDERLINE
==============================*/

.link{

    position:relative;

}

.link::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-3px;

    width:0;

    height:2px;

    background:var(--primary);

    transition:.35s;

}

.link:hover::after{

    width:100%;

}

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

button:disabled{

    opacity:.5;

    cursor:not-allowed;

}

/*==============================
ACCESSIBILITY
==============================*/

:focus-visible{

    outline:3px solid var(--primary);

    outline-offset:3px;

}

/*==============================
REDUCE MOTION
==============================*/

@media (prefers-reduced-motion:reduce){

*{

animation:none !important;

transition:none !important;

scroll-behavior:auto !important;

}

}

/*==============================
PRINT
==============================*/

@media print{

header,
footer,
.back-to-top,
.mobile-menu,
.hero-buttons,
.cta{

display:none;

}

body{

background:#fff;

color:#000;

}

section{

padding:20px 0;

}

a{

text-decoration:none;

color:#000;

}

}

/*==============================
DARK MODE
==============================*/

body.dark{

background:#0f172a;

color:#f8fafc;

}

body.dark header{

background:rgba(15,23,42,.92);

}

body.dark .tool-card,
body.dark .feature,
body.dark .category-card,
body.dark .latest-card,
body.dark .step,
body.dark .faq-item{

background:#1e293b;

border-color:#334155;

}

body.dark p{

color:#cbd5e1;

}

body.dark h1,
body.dark h2,
body.dark h3,
body.dark h4{

color:#fff;

}

body.dark footer{

background:#020617;

}

/*==============================
DARK MODE TOGGLE
==============================*/

.theme-toggle{

width:52px;

height:52px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

cursor:pointer;

background:#fff;

box-shadow:0 15px 35px rgba(15,23,42,.12);

transition:.35s;

}

.theme-toggle:hover{

transform:rotate(180deg);

}

body.dark .theme-toggle{

background:#1e293b;

color:#fff;

}

/*==============================
CUSTOM BADGES
==============================*/

.badge-success{

background:#dcfce7;

color:#15803d;

}

.badge-warning{

background:#fef3c7;

color:#b45309;

}

.badge-danger{

background:#fee2e2;

color:#b91c1c;

}

.badge-primary{

background:#dbeafe;

color:#2563eb;

}

/*==============================
SHADOW UTILITIES
==============================*/

.shadow-sm{

box-shadow:0 8px 20px rgba(0,0,0,.08);

}

.shadow-md{

box-shadow:0 18px 35px rgba(0,0,0,.10);

}

.shadow-lg{

box-shadow:0 30px 60px rgba(0,0,0,.15);

}

/*==============================
BORDER RADIUS UTILITIES
==============================*/

.rounded{

border-radius:18px;

}

.rounded-lg{

border-radius:28px;

}

.rounded-full{

border-radius:999px;

}

/*==============================
GRADIENT BACKGROUNDS
==============================*/

.bg-primary{

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

color:#fff;

}

.bg-light{

background:#f8fafc;

}

.bg-dark{

background:#0f172a;

color:#fff;

}

/*==============================
SPACING UTILITIES
==============================*/

.py-50{

padding:50px 0;

}

.py-80{

padding:80px 0;

}

.px-30{

padding-left:30px;

padding-right:30px;

}

.mx-auto{

margin:auto;

}
/* =========================
   MOBILE IMAGE TOOLS DROPDOWN
========================= */

@media (max-width: 768px) {

    .nav-links .dropdown {
        position: relative;
    }

    .nav-links .dropdown-menu {
        display: none !important;
        position: static !important;
        width: 100% !important;
        margin: 8px 0 0 0 !important;
        padding: 8px 0 !important;
        background: #ffffff !important;
        box-shadow: none !important;
        border-radius: 10px !important;
    }

    .nav-links .dropdown.dropdown-open .dropdown-menu {
        display: block !important;
    }

    .nav-links .dropdown-menu a {
        display: block !important;
        width: 100% !important;
        padding: 12px 18px !important;
        font-size: 15px !important;
        color: #1e293b !important;
        text-decoration: none !important;
    }

    .nav-links .dropdown-menu a:hover {
        background: #f1f5ff !important;
    }

    .nav-links .dropdown > a {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
    }

    .nav-links .dropdown.dropdown-open > a i {
        transform: rotate(180deg);
    }

}
@media (max-width: 992px) {

    .nav-links .dropdown-menu {
        display: none !important;
    }

    .nav-links .dropdown.active .dropdown-menu {
        display: block !important;
        position: static !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

}
/* MOBILE HAMBURGER CLICK FIX */
/* MOBILE HAMBURGER CLICK FIX */
.mobile-menu {
    position: relative !important;
    z-index: 99999 !important;
    display: none !important;
    align-items: center;
    justify-content: center;
    pointer-events: auto !important;
    cursor: pointer;
    touch-action: manipulation;
}

.mobile-menu i {
    pointer-events: none !important;
}


header,
header .container,
.navbar {
    position: relative;
    z-index: 9999;
}
.faq-item h3 {
    cursor: pointer;
}

.faq-item p {
    display: none;
}

.faq-item.active p {
    display: block;
}
.faq-item > p {
    display: none;
}

.faq-item.active > p {
    display: block;
}

/* =========================================================
   FINAL HEADER / NAVIGATION
   Single responsive rule set
   ========================================================= */

header {
    width: 100%;
    position: relative;
    z-index: 9999;
}

header .container {
    width: 92%;
    max-width: 1200px;
    min-height: 82px;
    margin: 0 auto;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;

    flex-wrap: nowrap !important;
}

/* =========================
   LOGO
   ========================= */

header .logo {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;

    gap: 12px !important;
    flex: 0 0 auto !important;

    white-space: nowrap !important;
    text-decoration: none;
}

header .logo-icon {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;

    border-radius: 50%;
    overflow: hidden;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

header .logo-icon img {
    width: 100% !important;
    height: 100% !important;

    display: block !important;
    object-fit: contain;
}

header .logo-text {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;

    gap: 6px !important;
    white-space: nowrap !important;
}

header .logo-text h2 {
    margin: 0 !important;
    font-size: 1.4rem;
    line-height: 1 !important;
}

header .logo-text span {
    margin: 0 !important;
    line-height: 1 !important;
}

/* =========================
   DESKTOP NAVIGATION
   ========================= */

header .main-nav {
    display: flex !important;
    align-items: center !important;

    margin-left: auto !important;
    flex: 0 0 auto !important;
}

header .nav-links {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;

    position: static !important;
    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    gap: 30px !important;

    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;

    list-style: none !important;
}

header .nav-links li {
    display: block !important;
    flex: 0 0 auto !important;
    list-style: none !important;
}

header .nav-links li a {
    display: inline-flex !important;
    align-items: center !important;

    white-space: nowrap !important;
}

/* =========================
   HAMBURGER: DESKTOP HIDDEN
   ========================= */

header .mobile-menu {
    display: none !important;

    visibility: hidden !important;
    opacity: 0 !important;

    pointer-events: none !important;
}

/* =========================================================
   MOBILE ONLY
   768px and below
   ========================================================= */

@media (max-width: 768px) {

    header .container {
        width: 92% !important;
        min-height: 70px !important;

        flex-direction: row !important;
        flex-wrap: nowrap !important;

        justify-content: space-between !important;
    }

    header .logo {
        gap: 10px !important;
        min-width: 0 !important;
    }

    header .logo-icon {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
    }

    header .logo-text {
        gap: 5px !important;
    }

    header .logo-text h2 {
        font-size: 1.2rem !important;
    }

    header .logo-text span {
        font-size: .75rem !important;
    }

    /* Hide desktop navigation */
    header .nav-links {
        display: none !important;
    }

    /* Show hamburger */
    header .mobile-menu {
        display: flex !important;

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

        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;

        visibility: visible !important;
        opacity: 1 !important;

        pointer-events: auto !important;
        cursor: pointer !important;
    }

    header .mobile-menu i {
        pointer-events: none !important;
    }
}

/* =========================================================
   END OF MAIN.CSS
   ========================================================= */