@font-face{font-family:'Inter';font-display:swap}@font-face{font-family:'Font Awesome 5 Free';font-display:swap}@font-face{font-family:'bootstrap-icons';font-display:swap}

:root{
    --color-primary:#6d28d9 !important;
    --color-primary-rgb:109,40,217 !important;
    --color-secondary:#d946ef !important;
    --color-blue-light:#f1f0fb !important;
}

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

svg{max-width:100% !important;max-height:480px !important}
.single-page-icon svg,.tool-icon svg,.content-title-icon svg{max-width:48px !important;max-height:48px !important;width:48px !important;height:48px !important}
.tool-view-wrapper svg,.single-page-inner svg{max-width:100% !important;max-height:320px !important}

.container, .container-fluid {
    width: 98% !important;
    max-width: 98% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
}
@media (min-width: 1200px) {
    .container, .container-fluid { width: 98% !important; max-width: 98% !important; }
}
@media (min-width: 1600px) {
    .container, .container-fluid { width: 98% !important; max-width: 98% !important; }
}

/* Deep White Canvas & Premium Modern Header with Restored Purple Gradient Wave */
.main-section{
    background: #ffffff url('../images/inner-bg.webp') right top no-repeat !important;
    background-size: 580px 280px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 24px !important;
    box-shadow: 0px 10px 32px rgba(15, 23, 42, 0.06) !important;
    position: relative !important;
    overflow: hidden !important;
}
@media (max-width: 991px) {
    .main-section {
        background-size: 360px 200px !important;
    }
}
@media (max-width: 767px) {
    .main-section {
        background-size: 260px 150px !important;
    }
}

/* Header Navigation Links: Frosted Glassmorphic Pill for 100% Visibility */
.header-navbar ul {
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 5px 10px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1.5px solid rgba(226, 232, 240, 0.95) !important;
    border-radius: 99px !important;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.08) !important;
}

.header-navbar ul li a,
.header-navbar ul li a.nav-link {
    color: #0f172a !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 7px 14px !important;
    border-radius: 99px !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.header-navbar ul li a:hover,
.header-navbar ul li a.nav-link:hover,
.header-navbar ul li a:focus {
    color: #ffffff !important;
    background: linear-gradient(135deg, #6366f1, #a855f7) !important;
    box-shadow: 0 3px 10px rgba(99, 102, 241, 0.35) !important;
    transform: translateY(-1px) !important;
}

.header-navbar .dropdown-toggle::after {
    color: #64748b !important;
    vertical-align: middle !important;
    margin-left: 4px !important;
    transition: color 0.2s ease !important;
}

.header-navbar ul li a:hover .dropdown-toggle::after,
.header-navbar .dropdown-toggle:hover::after {
    color: #ffffff !important;
}

.navbar-toggler {
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
    background: #ffffff !important;
}
.navbar-toggler i {
    color: #0f172a !important;
}

@media (max-width: 991px) {
    .header-navbar ul {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 6px !important;
        padding: 16px 14px !important;
        border-radius: 16px !important;
    }
    .header-navbar ul li a {
        color: #0f172a !important;
        font-size: 16px !important;
        padding: 10px 14px !important;
    }
}

.single-page-sec,.single-page-inner,.es,.tool-content,.tool-view-wrapper{
    max-width:100% !important;
    width:100% !important;
    box-sizing:border-box !important;
}

/* Hero Section */
.hero-section{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
    padding:32px 0 16px 0 !important;
    text-align:left !important;
    z-index:2 !important;
    margin:0 !important;
}

.hero-small-title,.hero-section .hero-small-title{
    order:1 !important;
    display:inline-flex !important;
    align-items:center !important;
    gap:6px !important;
    padding:6px 16px !important;
    border-radius:99px !important;
    background:linear-gradient(135deg, rgba(109, 40, 217, 0.1), rgba(217, 70, 239, 0.12)) !important;
    border:1px solid rgba(109, 40, 217, 0.25) !important;
    color:#6d28d9 !important;
    font-size:12px !important;
    font-weight:800 !important;
    text-transform:uppercase !important;
    letter-spacing:1px !important;
    margin-bottom:14px !important;
    box-shadow:0 4px 14px rgba(109, 40, 217, 0.08) !important;
}

.hero-section h1{
    order:2 !important;
    display:block !important;
    font-size:36px !important;
    font-weight:900 !important;
    line-height:1.28 !important;
    letter-spacing:-0.5px !important;
    color:#0f172a !important;
    max-width:920px !important;
    margin:0 0 24px 0 !important;
}

/* Original Wide Pill Search Bar with Icon */
.main-search-sec{
    margin-bottom: 45px !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    z-index: 1 !important;
}

.main-search-sec input{
    flex: 1 !important;
    width: 1% !important;
    border-radius: 100px !important;
    border: 1.5px solid var(--color-primary) !important;
    height: 56px !important;
    padding: 0 28px !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    color: #0f172a !important;
    background: #ffffff !important;
    box-shadow: 0 4px 16px rgba(109, 40, 217, 0.08) !important;
    outline: none !important;
    transition: all 0.2s ease !important;
}

.main-search-sec input:focus{
    box-shadow: 0 0 0 4px rgba(109, 40, 217, 0.22) !important;
    border-color: var(--color-primary) !important;
}

.main-search-sec .q-icon{
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    border-radius: 100px !important;
    border: 2px solid #ffffff !important;
    background: linear-gradient(135deg, #6d28d9, #4f46e5) !important;
    box-shadow: 0 4px 14px rgba(109, 40, 217, 0.3) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: 14px !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    transition: transform 0.2s ease !important;
}

.main-search-sec .q-icon:hover{
    transform: scale(1.06) !important;
}

.cookie-alert{position:fixed;bottom:0;left:0;width:100%;z-index:999;border-radius:0}

/* Category & Tool Card Visual Styling - Modern SaaS Clean UI */
.content-sec .content-sec-inner,
.content-sec-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    margin-bottom: 38px !important;
}

.content-sec .content-sec-inner .content-title-sec,
.content-title-sec {
    width: 100% !important;
    max-width: 100% !important;
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 14px !important;
    padding: 12px 18px !important;
    box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.04) !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    text-align: left !important;
    margin-bottom: 16px !important;
    transition: all 0.2s ease !important;
}

.content-title-sec:hover {
    border-color: #cbd5e1 !important;
}

.content-title-icon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15) !important;
    margin-bottom: 0 !important;
    transition: transform 0.2s ease !important;
}

.content-title-icon svg {
    stroke: #ffffff !important;
    fill: #ffffff !important;
    width: 20px !important;
    height: 20px !important;
}

.content-title-sec h2, .content-title-sec h3, .content-title-sec .h2, .content-title-sec .main-subtitle {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    letter-spacing: -0.01em !important;
    margin: 0 !important;
    text-align: left !important;
}

/* Responsive Grid Layout for Category & Related Tools */
.content-sec .content-sec-inner .content-cats-sec,
.content-cats-sec {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 16px !important;
    width: 100% !important;
    margin-top: 0 !important;
}

@media (max-width: 640px) {
    .content-sec .content-sec-inner .content-cats-sec,
    .content-cats-sec, .related-tools-grid {
        grid-template-columns: 1fr !important;
    }
}

.content-sec .content-sec-inner .content-cats-sec .content-cats-col,
.content-cats-sec .content-cats-col,
.content-cats-col {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Clean White SaaS Tool Card */
.content-cats-inner {
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease !important;
    border-radius: 14px !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    padding: 18px 20px !important;
    box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.04), 0 1px 2px -1px rgba(15, 23, 42, 0.02) !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 100% !important;
    min-height: 140px !important;
    overflow: hidden !important;
    text-decoration: none !important;
}

.content-cats-inner::before {
    display: none !important;
}

.content-cats-inner:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 24px -4px rgba(15, 23, 42, 0.08), 0 4px 6px -2px rgba(15, 23, 42, 0.03) !important;
    border-color: #cbd5e1 !important;
    background: #ffffff !important;
}

.content-cats-icon {
    border-radius: 10px !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 12px !important;
    transition: transform 0.2s ease !important;
}

.content-cats-inner:hover .content-cats-icon {
    transform: scale(1.08) !important;
}

.content-cats-icon svg,
.content-cats-icon i {
    width: 20px !important;
    height: 20px !important;
    font-size: 18px !important;
}

.content-cats-inner h3,
.content-cats-inner h2,
.content-cats-inner .h2 {
    font-size: 14.5px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: -0.01em !important;
    color: #1e293b !important;
    margin: 2px 0 6px 0 !important;
    transition: color 0.15s ease !important;
}

.content-cats-inner p {
    font-size: 12px !important;
    line-height: 1.5 !important;
    color: #64748b !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* ==========================================================================
   CLEAN PREMIUM SAAS TOOL CARDS (High-Contrast, Crisp & Modern)
   ========================================================================== */

/* Universal Tool Card */
.content-cats-inner {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 18px 18px !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 3px 8px rgba(15, 23, 42, 0.02) !important;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    height: 100% !important;
    min-height: 120px !important;
    text-decoration: none !important;
    position: relative !important;
    overflow: hidden !important;
}

.content-cats-inner::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #6366f1, #a855f7);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.content-cats-inner:hover {
    transform: translateY(-3px) !important;
    background: #ffffff !important;
    border-color: #818cf8 !important;
    box-shadow: 0 12px 24px -4px rgba(99, 102, 241, 0.12), 0 4px 8px rgba(15, 23, 42, 0.04) !important;
}

.content-cats-inner:hover::after {
    opacity: 1;
}

/* Title Link: Icon & Title side-by-side */
.content-cats-title-link {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 8px !important;
    text-decoration: none !important;
    width: 100% !important;
}

/* Icon Squircle */
.content-cats-icon {
    border-radius: 11px !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 0 !important;
    flex-shrink: 0 !important;
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    transition: all 0.2s ease !important;
}

.content-cats-inner:hover .content-cats-icon {
    transform: scale(1.08) !important;
}

.content-cats-icon svg,
.content-cats-icon i {
    width: 22px !important;
    height: 22px !important;
    font-size: 19px !important;
}

/* Title & Description */
.content-cats-inner h3,
.content-cats-inner h2,
.content-cats-inner .h2 {
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.01em !important;
    color: #0f172a !important;
    margin: 0 !important;
    flex: 1 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    transition: color 0.15s ease !important;
}

.content-cats-inner:hover h3 {
    color: #4f46e5 !important;
}

.content-cats-inner p {
    font-size: 12.5px !important;
    font-weight: 500 !important;
    line-height: 1.55 !important;
    color: #475569 !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* ─── Multi-Color Rotating Palette for Tool Cards (Vibrant SaaS Colors) ─── */

/* 1. Electric Blue */
.content-cats-col:nth-child(6n+1) .content-cats-icon {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
    border: 1.5px solid #93c5fd !important;
}
.content-cats-col:nth-child(6n+1) .content-cats-icon i,
.content-cats-col:nth-child(6n+1) .content-cats-icon svg {
    color: #2563eb !important;
    stroke: #2563eb !important;
    fill: #2563eb !important;
}
.content-cats-col:nth-child(6n+1) .content-cats-inner:hover {
    border-color: #60a5fa !important;
    box-shadow: 0 12px 24px -4px rgba(37, 99, 235, 0.16), 0 4px 8px rgba(15, 23, 42, 0.04) !important;
}
.content-cats-col:nth-child(6n+1) .content-cats-inner:hover h3 {
    color: #2563eb !important;
}

/* 2. Royal Violet */
.content-cats-col:nth-child(6n+2) .content-cats-icon {
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%) !important;
    border: 1.5px solid #c4b5fd !important;
}
.content-cats-col:nth-child(6n+2) .content-cats-icon i,
.content-cats-col:nth-child(6n+2) .content-cats-icon svg {
    color: #7c3aed !important;
    stroke: #7c3aed !important;
    fill: #7c3aed !important;
}
.content-cats-col:nth-child(6n+2) .content-cats-inner:hover {
    border-color: #a78bfa !important;
    box-shadow: 0 12px 24px -4px rgba(124, 58, 237, 0.16), 0 4px 8px rgba(15, 23, 42, 0.04) !important;
}
.content-cats-col:nth-child(6n+2) .content-cats-inner:hover h3 {
    color: #7c3aed !important;
}

/* 3. Emerald Green */
.content-cats-col:nth-child(6n+3) .content-cats-icon {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%) !important;
    border: 1.5px solid #6ee7b7 !important;
}
.content-cats-col:nth-child(6n+3) .content-cats-icon i,
.content-cats-col:nth-child(6n+3) .content-cats-icon svg {
    color: #059669 !important;
    stroke: #059669 !important;
    fill: #059669 !important;
}
.content-cats-col:nth-child(6n+3) .content-cats-inner:hover {
    border-color: #34d399 !important;
    box-shadow: 0 12px 24px -4px rgba(5, 150, 105, 0.16), 0 4px 8px rgba(15, 23, 42, 0.04) !important;
}
.content-cats-col:nth-child(6n+3) .content-cats-inner:hover h3 {
    color: #059669 !important;
}

/* 4. Warm Amber */
.content-cats-col:nth-child(6n+4) .content-cats-icon {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important;
    border: 1.5px solid #fcd34d !important;
}
.content-cats-col:nth-child(6n+4) .content-cats-icon i,
.content-cats-col:nth-child(6n+4) .content-cats-icon svg {
    color: #d97706 !important;
    stroke: #d97706 !important;
    fill: #d97706 !important;
}
.content-cats-col:nth-child(6n+4) .content-cats-inner:hover {
    border-color: #fbbf24 !important;
    box-shadow: 0 12px 24px -4px rgba(217, 119, 6, 0.16), 0 4px 8px rgba(15, 23, 42, 0.04) !important;
}
.content-cats-col:nth-child(6n+4) .content-cats-inner:hover h3 {
    color: #d97706 !important;
}

/* 5. Coral Rose */
.content-cats-col:nth-child(6n+5) .content-cats-icon {
    background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%) !important;
    border: 1.5px solid #fda4af !important;
}
.content-cats-col:nth-child(6n+5) .content-cats-icon i,
.content-cats-col:nth-child(6n+5) .content-cats-icon svg {
    color: #e11d48 !important;
    stroke: #e11d48 !important;
    fill: #e11d48 !important;
}
.content-cats-col:nth-child(6n+5) .content-cats-inner:hover {
    border-color: #f43f5e !important;
    box-shadow: 0 12px 24px -4px rgba(225, 29, 72, 0.16), 0 4px 8px rgba(15, 23, 42, 0.04) !important;
}
.content-cats-col:nth-child(6n+5) .content-cats-inner:hover h3 {
    color: #e11d48 !important;
}

/* 6. Vivid Teal */
.content-cats-col:nth-child(6n) .content-cats-icon {
    background: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%) !important;
    border: 1.5px solid #5eead4 !important;
}
.content-cats-col:nth-child(6n) .content-cats-icon i,
.content-cats-col:nth-child(6n) .content-cats-icon svg {
    color: #0d9488 !important;
    stroke: #0d9488 !important;
    fill: #0d9488 !important;
}
.content-cats-col:nth-child(6n) .content-cats-inner:hover {
    border-color: #2dd4bf !important;
    box-shadow: 0 12px 24px -4px rgba(13, 148, 136, 0.16), 0 4px 8px rgba(15, 23, 42, 0.04) !important;
}
.content-cats-col:nth-child(6n) .content-cats-inner:hover h3 {
    color: #0d9488 !important;
}

/* ─── Category Section Headers ─── */
.cat-utilities .content-title-sec {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
    border: 1.5px solid #bfdbfe !important;
    border-left: 5px solid #2563eb !important;
}
.cat-utilities .content-title-icon {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35) !important;
}

.cat-security .content-title-sec {
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%) !important;
    border: 1.5px solid #ddd6fe !important;
    border-left: 5px solid #7c3aed !important;
}
.cat-security .content-title-icon {
    background: linear-gradient(135deg, #7c3aed, #6d28d9) !important;
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35) !important;
}

.cat-content .content-title-sec, .cat-texttools .content-title-sec {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%) !important;
    border: 1.5px solid #a7f3d0 !important;
    border-left: 5px solid #059669 !important;
}
.cat-content .content-title-icon, .cat-texttools .content-title-icon {
    background: linear-gradient(135deg, #059669, #047857) !important;
    box-shadow: 0 4px 14px rgba(5, 150, 105, 0.35) !important;
}

.cat-mediatools .content-title-sec, .cat-images .content-title-sec {
    background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%) !important;
    border: 1.5px solid #fecdd3 !important;
    border-left: 5px solid #e11d48 !important;
}
.cat-mediatools .content-title-icon, .cat-images .content-title-icon {
    background: linear-gradient(135deg, #e11d48, #be123c) !important;
    box-shadow: 0 4px 14px rgba(225, 29, 72, 0.35) !important;
}

.cat-converters .content-title-sec, .cat-documentconverters .content-title-sec {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important;
    border: 1.5px solid #fde68a !important;
    border-left: 5px solid #d97706 !important;
}
.cat-converters .content-title-icon, .cat-documentconverters .content-title-icon {
    background: linear-gradient(135deg, #d97706, #b45309) !important;
    box-shadow: 0 4px 14px rgba(217, 119, 6, 0.35) !important;
}

.cat-designtools .content-title-sec, .cat-domains .content-title-sec, .cat-downloads .content-title-sec {
    background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%) !important;
    border: 1.5px solid #fbcfe8 !important;
    border-left: 5px solid #db2777 !important;
}
.cat-designtools .content-title-icon, .cat-domains .content-title-icon, .cat-downloads .content-title-icon {
    background: linear-gradient(135deg, #db2777, #9d174d) !important;
    box-shadow: 0 4px 14px rgba(219, 39, 119, 0.35) !important;
}

/* Blog Card Styles */
.blog-sec-col:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 20px 38px -4px rgba(109, 40, 217, 0.16) !important;
    border-color: #8b5cf6 !important;
}

/* Day Mode Clean Defaults */
html, body, body.light, body.dark {
    background-color: #f8fafc !important;
    background-image: none !important;
    color: #0f172a !important;
}

.single-page-sec, .single-page-inner, .dark .single-page-sec, .dark .single-page-inner {
    background: #ffffff !important;
    color: #0f172a !important;
}

.custom-textarea, .form-control, .form-select, input[type="text"], input[type="number"], input[type="email"], textarea, select {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1.5px solid #cbd5e1 !important;
}

.custom-label, label {
    color: #1e293b !important;
    font-weight: 700 !important;
}

/* ==========================================================================
   PREMIUM CYBER FOOTER (Spans full width, centered container, 100% responsive)
   ========================================================================== */
.cyber-footer {
    position: relative;
    background: #090d16 radial-gradient(circle at 80% 20%, rgba(99, 102, 241, 0.08) 0%, rgba(9, 13, 22, 0) 60%);
    color: #94a3b8;
    padding: 50px 24px 30px 24px;
    font-family: 'Outfit', sans-serif;
    box-sizing: border-box;
    width: 100%;
    margin-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
}

.cyber-footer-container {
    max-width: 1360px;
    margin: 0 auto;
    width: 100%;
}

/* Top Section: Brand + Stats */
.cyber-footer-top-row {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

@media (min-width: 992px) {
    .cyber-footer-top-row {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.cyber-footer-brand-col {
    max-width: 580px;
}

.cyber-footer-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    margin-bottom: 12px;
}

.cyber-footer-logo span {
    font-size: 1.85rem;
    font-weight: 900;
    letter-spacing: -0.5px;
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: 'Outfit', sans-serif;
}

.cyber-footer-desc {
    font-size: 14px;
    line-height: 1.65;
    color: #94a3b8;
    margin: 0 0 16px 0;
}

.cyber-badge-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cyber-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
    font-size: 12px;
    font-weight: 600;
}

.cyber-footer-stats-col {
    flex-shrink: 0;
}

.cyber-footer-stats-card {
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 20px 30px;
    gap: 25px;
    backdrop-filter: blur(10px);
}

.cyber-footer-stats-card .stat-item {
    text-align: center;
}

.cyber-footer-stats-card .stat-num {
    font-size: 26px;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: -0.5px;
    background: linear-gradient(135deg, #a855f7, #6366f1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cyber-footer-stats-card .stat-label {
    font-size: 11.5px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

.cyber-footer-stats-card .stat-divider {
    width: 1px;
    height: 36px;
    background: rgba(255, 255, 255, 0.08);
}

.cyber-footer-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: 36px 0;
    width: 100%;
}

/* Middle 4-Column Categorized Links */
.cyber-footer-links-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    width: 100%;
}

@media (max-width: 991px) {
    .cyber-footer-links-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

@media (max-width: 575px) {
    .cyber-footer-links-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

.cyber-footer-col {
    display: flex;
    flex-direction: column;
}

.cyber-footer-heading {
    font-size: 14.5px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: #ffffff !important;
    margin: 0 0 16px 0 !important;
    display: flex;
    align-items: center;
    gap: 6px;
}

.cyber-footer-links {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cyber-footer-links li {
    margin: 0 !important;
}

.cyber-footer-links li a {
    color: #94a3b8 !important;
    text-decoration: none !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    display: inline-block !important;
}

.cyber-footer-links li a:hover {
    color: #ffffff !important;
    transform: translateX(4px) !important;
}

/* Bottom Bar */
.cyber-footer-bottom {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    color: #64748b;
}

@media (min-width: 768px) {
    .cyber-footer-bottom {
        flex-direction: row;
    }
}

.cyber-footer-copy {
    color: #64748b;
}

.cyber-footer-copy a {
    color: #a855f7;
    text-decoration: none;
    font-weight: 700;
}

.cyber-footer-legal {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cyber-footer-legal a {
    color: #94a3b8;
    text-decoration: none;
    transition: color 0.2s ease;
}

.cyber-footer-legal a:hover {
    color: #ffffff;
}

/* AI Copilot FAB */
.cyber-ai-fab-container{position:fixed;bottom:28px;right:28px;z-index:99990;display:flex;align-items:center;gap:12px}
.cyber-ai-tooltip-pill{background:#ffffff;color:#0f172a;padding:8px 16px;border-radius:30px;font-size:13px;font-weight:700;box-shadow:0 10px 25px rgba(15,23,42,0.12),0 4px 10px rgba(109,40,217,0.15);border:1px solid #e2e8f0;display:flex;align-items:center;gap:8px;cursor:pointer;transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1);animation:floatPill 3s infinite ease-in-out;white-space:nowrap}
.cyber-ai-tooltip-pill:hover{background:#6d28d9;color:#ffffff;border-color:#6d28d9;transform:translateY(-2px) scale(1.03)}
.cyber-ai-tooltip-pill .live-dot{width:8px;height:8px;background-color:#10b981;border-radius:50%;box-shadow:0 0 0 2px rgba(16,185,129,0.2)}
@keyframes floatPill{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.cyber-ai-fab{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#6d28d9,#4f46e5);color:#ffffff;box-shadow:0 10px 25px rgba(109,40,217,0.35),0 4px 10px rgba(0,0,0,0.1);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1);border:none;outline:none;flex-shrink:0}
.cyber-ai-fab:hover{transform:scale(1.08) translateY(-2px);box-shadow:0 14px 30px rgba(109,40,217,0.45),0 6px 15px rgba(0,0,0,0.15)}

@media screen and (max-width:991px){.header-megamenu{display:none !important}}

/* ==========================================================================
   UNIVERSAL MOBILE RESPONSIVENESS & TOUCH OPTIMIZATION FOR ALL TOOLS
   ========================================================================== */
@media screen and (max-width: 991px) {
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
        position: relative !important;
    }

    .container, .container-fluid, .container-sm, .container-md, .container-lg {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        box-sizing: border-box !important;
    }

    /* Single page tool shell */
    .single-page-sec {
        margin-bottom: 28px !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .single-page-inner {
        padding: 18px 14px !important;
        border-radius: 18px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    .single-page-main-title {
        font-size: 22px !important;
        line-height: 1.25 !important;
        margin-bottom: 6px !important;
    }

    .single-page-main-desc {
        font-size: 13.5px !important;
        line-height: 1.5 !important;
        margin-bottom: 16px !important;
    }

    .single-page-icon {
        width: 40px !important;
        height: 40px !important;
        margin-bottom: 10px !important;
    }

    /* Form controls across all tools */
    .custom-input, .custom-textarea, .form-control,
    input[type="text"], input[type="number"], input[type="email"],
    input[type="password"], input[type="url"], input[type="search"],
    select, .form-select {
        font-size: 16px !important; /* Prevents auto-zoom on iOS Safari */
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .custom-input {
        height: 46px !important;
        padding: 0 14px !important;
        border-radius: 12px !important;
    }

    .custom-textarea {
        border-radius: 14px !important;
        padding: 12px 14px !important;
    }

    /* Tool Action buttons & toolbars */
    .btn, button.btn, .custom-btn, .btn-primary, .btn-secondary, .btn-outline-primary {
        min-height: 42px !important;
        padding: 8px 16px !important;
        font-size: 14px !important;
        border-radius: 10px !important;
        touch-action: manipulation !important;
    }

    /* Button groups wrap cleanly instead of clipping */
    .btn-group, .d-flex.gap-2, .d-flex.gap-3, .form-group .d-flex {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    /* Tool output boxes, code snippets & preformatted text */
    pre, code, .code-block, .output-box, .result-box, textarea.output, .json-box {
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        word-break: break-word !important;
        font-size: 13px !important;
        box-sizing: border-box !important;
    }

    /* Tables across all tools */
    .table-responsive, table, .table {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    table th, table td {
        padding: 8px 10px !important;
        font-size: 13px !important;
    }

    /* Media, Canvas, Images & SVGs */
    img, canvas, svg, video, iframe {
        max-width: 100% !important;
        height: auto !important;
        box-sizing: border-box !important;
    }

    /* Grid cards inside tools */
    .calc-card, .tool-card, .generator-card {
        padding: 18px 14px !important;
        border-radius: 16px !important;
    }

    .input-group-row {
        gap: 1rem !important;
    }

    /* Accordions & FAQs */
    .tool-faq-section {
        margin-top: 24px !important;
        padding-top: 18px !important;
    }

    .tool-faq-section h3 {
        font-size: 1.15rem !important;
        margin-bottom: 14px !important;
    }

    .tool-faq-list details {
        padding: 10px 14px !important;
        border-radius: 10px !important;
    }

    .tool-faq-list summary {
        font-size: 0.95rem !important;
    }

    /* Related tools section */
    .content-sec {
        padding: 24px 0 !important;
    }

    .content-cats-sec {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .content-cats-col {
        width: 100% !important;
        padding: 0 !important;
    }
}

@media screen and (max-width: 480px) {
    .container, .container-fluid {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .single-page-inner {
        padding: 14px 10px !important;
        border-radius: 14px !important;
    }

    .single-page-main-title {
        font-size: 20px !important;
    }

    .single-page-main-desc {
        font-size: 12.5px !important;
    }

    .btn, button.btn {
        width: 100% !important;
    }

    .content-cats-sec {
        grid-template-columns: 1fr !important;
    }

    .tool-actions, .tool-buttons {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }
}