/* Fix for content shift when navbar becomes fixed on scroll on inner pages */
/* Make navbar always fixed on inner pages */
body.inner-page .static-nav {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1002;
    background: #143B59;
    /* Match the .fixedmenu compact sizing from the start so the navbar
       does not visibly shrink when the user scrolls past 200px. */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
}

/* Home page: navbar transparent initially (overlays slider), dark blue once user scrolls */
body.home-page .static-nav:not(.fixedmenu) {
    background: transparent !important;
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1002;
}

body.home-page .static-nav.fixedmenu {
    background: #143B59 !important;
}

/* Show default (non-scrolled) logo while navbar is transparent on home page */
body.home-page .static-nav:not(.fixedmenu) .logo-default {
    display: block !important;
}

body.home-page .static-nav:not(.fixedmenu) .logo-scrolled {
    display: none !important;
}

/* Add padding to body to compensate for fixed navbar on inner pages */
body.inner-page {
    padding-top: 80px;
}

/* Ensure page-header doesn't have extra margin */
.page-header.center-block {
    margin-top: 0;
}

/* Show scrolled logo on inner pages since navbar is always fixed */
body.inner-page .navbar .logo-default {
    display: none !important;
}

body.inner-page .navbar .logo-scrolled {
    display: inline-block !important;
    /* style.css only sizes .logo-scrolled when .fixedmenu is present, so on
       inner pages we have to apply the same sizing up-front to avoid the
       logo growing once the user scrolls past 200px and .fixedmenu kicks in. */
    font-size: 30px;
    font-weight: 700;
    color: #ffffff;
}

.pointer-none {
    pointer-events: none;
}

/* Every top-nav dropdown trigger (Solutions, Industries, AI, Microsoft,
   Hire, Resources, Company) has .pointer-none on its <a>, so the browser
   hit-tests the parent <li> instead — and shows whatever cursor THAT
   element has. Nothing set one, so it fell back to the default arrow even
   though hovering it opens a menu. Setting it here (not on the <a>, since
   pointer-events:none would make that ineffective) restores the hand
   cursor as a hover affordance without re-enabling clicks on the link. */
.navbar-nav > li.dropdown {
    cursor: pointer;
}

.visibility-visible {
    visibility: visible;
}

.animation-fadeIn {
    animation-name: fadeIn;
}

.ani-delay-450 {
    animation-delay: 450ms;
}

.ani-delay-400 {
    animation-delay: 400ms;
}

.ani-delay-350 {
    animation-delay: 350ms;
}

.ani-delay-300 {
    animation-delay: 300ms;
}

.width-372 {
    width: 372px;
}

.color-3a3c3e {
    color: #3a3c3e;
}

.height-22 {
    height: 22px;
}

.display-none {
    display: none;
}
.animation-fadeinLeft {
    visibility: visible;
    animation-delay: 300ms;
    animation-name: fadeInLeft;
}
.animation-fadeinRight {
    visibility: visible;
    animation-delay: 350ms;
    animation-name: fadeInRight;
}
.about-img {
    position: absolute;
    height: 100%;
    top: 0;
    bottom: 0;
    -webkit-background-size: cover;
    background-size: cover;
}
.animation-fadeinUp {
    visibility: visible;
    animation-delay: 350ms;
    height: 100%;
    animation-name: fadeInUp;
}
.team-img {
    background: url(https://akantik.com/images/Experienced-Team.jpg)no-repeat center / cover;
}
.talent-img {
    background: url(https://akantik.com/images/Top-IT-Telent.jpeg)no-repeat center / cover;
}
.time-img {
    background: url(https://akantik.com/images/Time-Zone-Aligned.jpg)no-repeat center / cover;
}
.banner-img {
    background: url(/Theme/images/homeBg.webp);
    background-size: cover;
    height: 100vh;
}
.banner-background {
    background: #00000073;
    height: inherit;
}

.ml-40 {
    margin-left: -40px
}
.number-animation {
    visibility: hidden;
    animation-delay: 400ms;
    animation-name: none;
}
.bg-white{
    background-color:white;
}
.mvc-img {
    height: 400px;
    width: 600px;
}
.right25 {
    right: 25px;
}

.tag-shortDesc {
    margin: 0 10px 0 0;
}
.video-hw {
    width: 100%;
    height: 308px;
}
.color-lightblue {
    color: #00bcd4
}
.privacy-body {
    line-height: 2.5;
    background-color: #f3f3f3;
}
.privacy-header {
    text-align: center;
    margin-top: 40px;
}
.text-list{
    list-style: disc;
    margin-left: 50px;
    color: black;
}

.min-width35{
    min-width:35px;
}
.color-black{
    color:black;
}
.plugin-review {
    margin: 10px;
    font-size: 18px;
}

/* Mega Menu Styles for Solutions and Hire Talent.
   The triggering <li> must not be a positioning context, or the menu
   centers on that narrow nav item instead of the full-width navbar
   (pushing it off-screen when the item sits near the left edge). */
.navbar-nav > li.mega-dropdown {
    position: static;
}

/* Keeps the panel open (via JS hover-intent in _TopNavbar.cshtml) while the
   pointer travels across the gap between the trigger and the centered panel.
   Must also force opacity/visibility/top, not just display — the plain
   `li:hover > .dropdown-menu` rule in style.css controls those and only
   applies while the cursor is inside the trigger <li>'s own (narrow) box.
   As the cursor moves around that box's edge (or across the gap) that raw
   :hover state flickers true/false, and since it also swaps `top` between
   180% (closed, from .fade-up) and 100% (open), the panel was animating
   back and forth between those two positions — the "dancing". Locking all
   four properties while .menu-open is active keeps it fully stable. */
.navbar-nav > li.mega-dropdown.menu-open > .dropdown-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    top: 100% !important;
}

.mega-menu {
    min-width: 900px;
    max-width: 1000px;
    padding: 20px;
    left: 50% !important;
    transform: translateX(-50%) !important;
    right: auto !important;
    /* No <li> in this navbar has an explicit z-index, so panels stack in
       plain DOM order — a later nav item's dropdown paints over an earlier
       one wherever they overlap. Because this panel is centered under the
       whole navbar, the cursor's path to reach it crosses other nav items
       (Industries/AI/Microsoft before Solutions; Resources/Company/CTA
       after Hire). If the cursor grazes one of those, its dropdown opens
       and — being later in the DOM — paints over this panel, stealing the
       hover and causing it to flicker/close. An explicit z-index keeps this
       panel on top so that can't happen. */
    z-index: 1050;
}

.mega-menu .row {
    margin: 0;
}

/* Ensure dropdowns don't overflow on smaller screens */
@media (min-width: 992px) and (max-width: 1200px) {
    .mega-menu {
        min-width: 750px;
        max-width: 90vw;
    }
}

.mega-menu ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 20px;
}

.mega-menu ul li h3.fontbold {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    color: #000;
    margin-bottom: 10px;
    margin-top: 10px;
    padding: 5px 15px;
    border-bottom: 2px solid #e8e8e8;
    white-space: normal;
}

.mega-menu ul li h3.fontbold:hover {
    background-color: transparent;
}

/* Bootstrap's base .dropdown-item sets white-space: nowrap, which makes
   longer labels/headers overflow past their mega-menu column instead of
   wrapping — override it here so long labels wrap within their column. */
.mega-menu .dropdown-item {
    padding: 8px 15px;
    font-size: 14px;
    white-space: normal;
}

.mega-menu .dropdown-item:hover {
    background-color: #1f516b;
    color: #fff;
}

.tech-button {
    display: inline-block;
    padding: 10px 25px;
    background: #3BA1C6;
    color: white !important;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    text-align: center;
}

.tech-button:hover {
    background: var(--dark-purple);
    color: white !important;
}

/* Fix for regular dropdowns positioning */
.navbar-nav .dropdown-menu {
    position: absolute;
}

/* Ensure Products and other regular dropdowns stay in viewport */
.navbar-nav > li:nth-last-child(-n+3) .dropdown-menu:not(.mega-menu) {
    right: 0;
    left: auto;
}

/* Responsive mega menu */
@media (max-width: 992px) {
    .mega-menu {
        min-width: auto;
        width: 100%;
        left: 0 !important;
        transform: none !important;
    }

    .mega-menu .row {
        flex-direction: column;
    }
}

/* Large screens - ensure mega menu fits */
@media (min-width: 1400px) {
    .mega-menu {
        min-width: 1000px;
        max-width: 1100px;
    }
}

/* AI Tools Showcase Section - Unique Design */
.ai-tools-section {
    padding: 50px 0;
    background: radial-gradient(circle at top right, #f0f4ff 0%, #e8eef8 50%, #f5f7fa 100%);
    position: relative;
    overflow: hidden;
}

.ai-tools-section::before {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(31, 36, 113, 0.05) 0%, transparent 70%);
    top: -250px;
    right: -250px;
    border-radius: 50%;
}

.ai-tools-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 15px;
}

.highlight-gradient {
    background: #5892bf;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
}

.ai-tools-subtitle {
    font-size: 1.15rem;
    color: #555;
    font-weight: 400;
    margin-bottom: 0;
}

/* Category Badges */
.category-badge {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.coding-badge {
    background: linear-gradient(135deg, #1f2471 0%, #3b3f9e 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(31, 36, 113, 0.3);
}

.mvp-badge {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
}

.category-badge:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(31, 36, 113, 0.4);
}

/* Tool Cards */
.ai-tool-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 15px 12px;
    text-align: center;
    position: relative;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    height: 100%;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08);
}

.ai-tool-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 12px;
    padding: 2px;
    background: linear-gradient(135deg, #e8e8e8, #f5f5f5);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    transition: all 0.4s ease;
}

.gradient-border-1::before {
    background: var(--dark-purple)
}
.gradient-border-2::before {
    background: var(--dark-purple);
}
.gradient-border-3::before {
    background: var(--dark-purple);
}
.gradient-border-4::before {
    background: var(--dark-purple);
}
.gradient-border-5::before {
    background: var(--dark-purple);
}
.gradient-border-6::before {
    background: var(--dark-purple);
}

.ai-tool-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 15px 40px rgba(31, 36, 113, 0.15);
}

.tool-card-inner {
    position: relative;
    z-index: 1;
}

/* Tool Icon Circle */
.tool-icon-circle {
    width: 50px;
    height: 50px;
    border-radius: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
    padding: 6px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.ai-tool-card:hover .tool-icon-circle {
    transform: rotate(360deg) scale(1.1);
}

.tool-icon-circle .tool-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.tool-placeholder-lg {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Tool Name */
.tool-name {
    font-size: 1rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 8px;
}

/* Circular Progress */
.circular-progress {
    position: relative;
    width: 50px;
    height: 50px;
    margin: 8px auto;
}

.progress-ring {
    transform: rotate(-90deg);
    width: 100%;
    height: 100%;
    display: block;
}

.progress-ring-circle {
    transition: stroke-dashoffset 1.5s ease-in-out;
}

.progress-ring-circle-bg {
    opacity: 0.2;
}

.percentage-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.75rem;
    font-weight: 700;
    background: #5892bf;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Tool Description */
.tool-description {
    font-size: 1rem;
    color: #666;
    line-height: 1.4;
    margin: 8px 0 0;
    min-height: 50px;
}

/* Responsive Design */
@media (max-width: 992px) {
    .category-badge {
        margin-bottom: 15px;
    }

    .ai-tool-card {
        margin-bottom: 15px;
    }

    .tool-description {
        min-height: 40px;
    }
}

@media (max-width: 768px) {
    .ai-tools-section {
        padding: 40px 0;
    }

    .ai-tools-title {
        font-size: 1.5rem;
    }

    .ai-tools-subtitle {
        font-size: 0.9rem;
    }

    .ai-tool-card {
        padding: 12px 10px;
        margin-bottom: 12px;
    }

    .category-badge {
        font-size: 0.75rem;
        padding: 8px 20px;
    }

    .tool-icon-circle {
        width: 30px;
        height: 30px;
    }

    .tool-name {
        font-size: 0.75rem;
    }

    .circular-progress {
        width: 45px;
        height: 45px;
    }

    .percentage-text {
        font-size: 0.65rem;
    }

    .tool-description {
        font-size: 0.65rem;
        min-height: auto;
    }
}

@media (max-width: 480px) {
    .ai-tools-title {
        font-size: 1.3rem;
    }

    .ai-tools-subtitle {
        font-size: 0.8rem;
    }

    .tool-icon-circle {
        width: 28px;
        height: 28px;
    }

    .circular-progress {
        width: 40px;
        height: 40px;
    }

    .tool-description {
        font-size: 0.6rem;
        min-height: auto;
    }

    .category-badge {
        font-size: 0.7rem;
        padding: 6px 15px;
    }
}

/* AI Productivity & Automation Tools Section - Card Layout */
.productivity-automation-section {
    padding: 100px 0;
    background: linear-gradient(135deg, #f5f7fa 0%, #e8eef8 100%);
    position: relative;
    overflow: hidden;
}

.productivity-automation-section::before {
    content: '';
    position: absolute;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(31, 36, 113, 0.06) 0%, transparent 70%);
    top: -400px;
    left: -200px;
    border-radius: 50%;
    animation: pulse 8s ease-in-out infinite;
}

.productivity-automation-section::after {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(91, 95, 201, 0.06) 0%, transparent 70%);
    bottom: -300px;
    right: -150px;
    border-radius: 50%;
    animation: pulse 6s ease-in-out infinite reverse;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.1); opacity: 0.7; }
}

/* Section Header */
.section-main-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: #1a1a1a;
    line-height: 1.3;
    margin-bottom: 15px;
}

.title-highlight {
    background: #5892bf;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
}

.section-subtitle {
    font-size: 1.15rem;
    color: #666;
    font-weight: 400;
    max-width: 700px;
    margin: 0 auto;
}

/* Tools Section Wrapper */
.tools-section-wrapper {
    position: relative;
    z-index: 1;
}

/* Category Header */
.section-category-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.category-badge-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #5892bf !important;
    box-shadow: 0 6px 20px rgba(31, 36, 113, 0.35);
    transition: all 0.3s ease;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.productivity-badge {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.35);
}

.automation-badge {
    background: #5892bf;
    box-shadow: 0 6px 20px rgba(31, 36, 113, 0.35);
}

.category-badge-icon:hover {
    transform: rotate(360deg) scale(1.1);
}

.category-badge-icon i {
    font-size: 22px;
    color: #ffffff;
}

.section-category-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 1rem;
}

/* AI Tool Card - Compact Design */
.ai-tool-card-compact {
    background: #ffffff;
    border-radius: 16px;
    padding: 25px 20px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    position: relative;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 2px solid #e8eef8;
    overflow: hidden;
}

.ai-tool-card-compact::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: #5892bf;
    opacity: 1;
}

.ai-tool-card-compact::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 2px;
/*    background: #5892bf;*/
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.ai-tool-card-compact:hover::after {
    opacity: 1;
}

    .ai-tool-card-compact:hover {
        transform: translateY(-10px);
        box-shadow: 0 15px 50px rgba(31, 36, 113, 0.25);
        /*border-color: #5892bf;*/
    }

/* Tool Card Logo */
.tool-card-logo {
    width: 60px;
    height: 60px;
    margin: 0 auto 15px;
    border-radius: 14px;
    background: linear-gradient(135deg, #f5f7fa 0%, #e8eef8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(31, 36, 113, 0.15);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    border: 2px solid #e0e7f1;
}

.tool-card-logo::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(31, 36, 113, 0.15) 0%, rgba(91, 95, 201, 0.15) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ai-tool-card-compact:hover .tool-card-logo {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 8px 25px rgba(31, 36, 113, 0.25);
    /*border-color: #1f2471;*/
}

.ai-tool-card-compact:hover .tool-card-logo::before {
    opacity: 1;
}

.tool-card-logo img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

.ai-tool-card-compact:hover .tool-card-logo img {
    transform: scale(1.05);
}

.tool-placeholder-compact {
    font-size: 28px;
    font-weight: 700;
    background: #5892bf;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Tool Card Title */
.tool-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #2d3748;
    margin-bottom: 12px;
    transition: all 0.3s ease;
    min-height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-tool-card-compact:hover .tool-card-title {
    color: #1f2471;
}

/* Tool Card Percentage */
.tool-card-percentage {
    font-size: 1.8rem;
    font-weight: 900;
    background: #5892bf;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    display: inline-block;
    margin-top: 10px;
    padding-top: 10px;
}

.tool-card-percentage::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 2px;
    background: #1F516B;
    border-radius: 2px;
    opacity: 0.3;
}

.tool-card-percentage::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 2px;
    background: #1F516B;
    border-radius: 2px;
    opacity: 0;
    transition: all 0.3s ease;
}

.ai-tool-card-compact:hover .tool-card-percentage::before {
    opacity: 0.6;
    width: 65px;
}

.ai-tool-card-compact:hover .tool-card-percentage::after {
    opacity: 1;
    width: 55px;
}

/* CTA Section */
.cta-wrapper {
    position: relative;
    z-index: 1;
}

.launch-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px !important;
    background: #3BA1C6;
    color: #ffffff !important;
    font-size: 1rem !important;
    font-weight: 700;
    text-decoration: none;
    border-radius: 60px;
    /*box-shadow: 0 10px 30px rgba(255, 127, 62, 0.4);*/
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
}

    .launch-cta-button::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: #3BA1C6;
        transition: left 0.5s ease;
    }

.launch-cta-button:hover::before {
    left: 100%;
}

    .launch-cta-button:hover {
        background: var(--dark-purple);
        transform: translateY(-5px) scale(1.05);
        box-shadow: 0 15px 40px rgba(255, 127, 62, 0.6);
        color: #ffffff !important;
    }

.cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.launch-cta-button:hover .cta-icon {
    transform: translateX(8px) rotate(45deg);
    background: rgba(255, 255, 255, 0.3);
}

/* Navbar CTA Button - Compact Version */
.navbar .launch-cta-button {
    padding: 6px 16px;
    font-size: 0.75rem;
    gap: 6px;
    border-radius: 25px;
    box-shadow: 0 3px 10px rgba(59, 161, 198, 0.25);
}

.navbar .launch-cta-button:hover {
    transform: translateY(-1px) scale(1.01);
    box-shadow: 0 5px 15px rgba(59, 161, 198, 0.4);
}

.navbar .cta-icon {
    width: 16px;
    height: 16px;
    font-size: 0.65rem;
}

.navbar .cta-text {
    font-size: 0.75rem;
    font-weight: 600;
}

.cta-subtitle {
    font-size: 0.95rem;
    color: #666;
    font-weight: 400;
}

/* ==========================================
   CREATIVE ABOUT SECTION REDESIGN
   ========================================== */

.about-creative-section {
    background: #ffffff;
    position: relative;
    overflow: hidden;
}

.about-creative-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: none;
    z-index: 0;
}

.about-creative-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.8), transparent);
    z-index: 0;
}

/* Decorative Background Shapes */
.creative-bg-shapes {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
    pointer-events: none;
}

.creative-bg-shapes .shape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.08;
    filter: blur(30px);
}

.creative-bg-shapes .shape-1 {
    width: 350px;
    height: 350px;
    background: linear-gradient(135deg, #3BA1C6, #1F516B);
    top: -100px;
    right: -100px;
}

.creative-bg-shapes .shape-2 {
    width: 300px;
    height: 300px;
    background: linear-gradient(135deg, #5ec5e8, #3BA1C6);
    bottom: -80px;
    left: -80px;
}

.creative-bg-shapes .shape-3 {
    width: 250px;
    height: 250px;
    background: linear-gradient(135deg, #3BA1C6, #2891b5);
    top: 40%;
    right: 15%;
}

/* Creative Heading */
.creative-heading-wrapper {
    position: relative;
    z-index: 1;
}

.creative-subtitle {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 3px;
    margin-bottom: 15px;
    padding: 8px 20px;
    background: linear-gradient(135deg, #3BA1C6, #1F516B);
    border-radius: 30px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 5px 20px rgba(59, 161, 198, 0.3);
}

.creative-main-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: #1F516B;
    line-height: 1.3;
    margin: 15px 0;
    letter-spacing: 1px;
}

.gradient-text {
    background: linear-gradient(135deg, #3BA1C6 0%, #1F516B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    display: inline-block;
}

.title-underline {
    width: 100px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #3BA1C6, transparent);
    margin: 15px auto;
    position: relative;
    border-radius: 5px;
}

.underline-dot {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #3BA1C6;
    border-radius: 50%;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 15px rgba(59, 161, 198, 0.6);
}

/* Intro Highlight Card */
.intro-highlight-card {
    background: linear-gradient(135deg, #3BA1C6 0%, #1F516B 100%);
    padding: 25px 35px;
    border-radius: 20px;
    position: relative;
    z-index: 1;
    box-shadow: 0 10px 30px rgba(59, 161, 198, 0.3);
    display: flex;
    align-items: center;
    gap: 20px;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.intro-highlight-card .card-icon {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: #ffffff;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.intro-highlight-card .intro-text {
    color: #ffffff;
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0;
    font-weight: 500;
}

.intro-highlight-card .intro-text strong {
    font-weight: 700;
    color: #ffffff;
}

/* Creative Info Cards */
.creative-info-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 30px;
    position: relative;
    z-index: 1;
    box-shadow: 0 12px 35px rgba(59, 161, 198, 0.2);
    /*    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;*/
    border: 2px solid transparent;
    height: 100%;
}

.creative-info-card:hover {
/*    transform: translateY(-5px);*/
/*    box-shadow: 0 12px 35px rgba(59, 161, 198, 0.2);*/
}

/* Card Decorative Elements */
.card-decoration {
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    top: -40px;
    right: -40px;
    opacity: 0.1;
    filter: blur(20px);
}

.card-decoration-purple {
    background: linear-gradient(135deg, #3BA1C6, #1F516B);
}

.card-decoration-teal {
    background: linear-gradient(135deg, #5ec5e8, #3BA1C6);
}

.card-decoration-gradient {
    background: linear-gradient(135deg, #3BA1C6, #2891b5);
}

/* Colorful Card Variations */
.card-purple {
    background: #ffffff;
}

.card-teal {
    border-color: rgba(94, 197, 232, 0.3);
    background: #ffffff;
}

.card-teal:hover {
    border-color: #5ec5e8;
    box-shadow: 0 12px 35px rgba(94, 197, 232, 0.3);
}

.card-gradient {
    border-color: rgba(40, 145, 181, 0.3);
    background: #ffffff;
}

.card-gradient:hover {
    border-color: #2891b5;
    box-shadow: 0 12px 35px rgba(40, 145, 181, 0.3);
}

.card-icon-small {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #ffffff;
    box-shadow: 0 5px 15px rgba(59, 161, 198, 0.3);
    transition: all 0.3s ease;
}

.creative-info-card:hover .card-icon-small {
    transform: translateY(-3px);
}

.icon-purple {
    background: linear-gradient(135deg, #3BA1C6, #1F516B);
}

.icon-teal {
    background: linear-gradient(135deg, #5ec5e8, #3BA1C6);
}

.icon-gradient {
    background: linear-gradient(135deg, #3BA1C6, #2891b5);
}

/* Large Icon for Global Card */
.card-icon-large {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #3BA1C6, #1F516B);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: #ffffff;
    box-shadow: 0 8px 25px rgba(59, 161, 198, 0.4);
}

/* Card Badges */
.card-badge {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-top: 5px;
}

.badge-purple {
    background: linear-gradient(135deg, #3BA1C6, #1F516B);
    color: #ffffff;
    box-shadow: 0 3px 10px rgba(59, 161, 198, 0.3);
}

.badge-teal {
    background: linear-gradient(135deg, #5ec5e8, #3BA1C6);
    color: #ffffff;
    box-shadow: 0 3px 10px rgba(94, 197, 232, 0.3);
}

/* Location Badges */
.location-badge {
    display: inline-block;
    padding: 6px 14px;
    background: #ffffff;
    border: 2px solid #3BA1C6;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #1F516B;
    transition: all 0.3s ease;
    box-shadow: 0 3px 10px rgba(59, 161, 198, 0.2);
}

.location-badge:hover {
    background: linear-gradient(135deg, #3BA1C6, #1F516B);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(59, 161, 198, 0.4);
}

.card-heading {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1F516B;
    margin-top: 0;
    margin-bottom: 10px;
}

h4.card-heading {
    margin-top: 20px;
}

.card-text {
    font-size: 1rem;
    line-height: 1.7;
    color: #212529;
    margin-bottom: 15px;
    font-weight: 500;
}

#engagement-models .software-box {
    padding: 32px 24px 30px;
    min-height: 0;
    border: 1px solid rgba(31, 81, 107, 0.15);
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

#engagement-models .software-box h3 {
    margin-top: 0;
}

#engagement-models .software-box:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.12);
    border-color: rgba(59, 161, 198, 0.4);
}

/* Why Akantik reason cards - numbered, left-aligned, tiled icons */
#video-parallax .soft-product .row {
    counter-reset: reasonCounter;
}

#video-parallax .software-box {
    text-align: left;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 32px 28px 30px;
    border: 1px solid #e7edf1;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
    position: relative;
    overflow: hidden;
    counter-increment: reasonCounter;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

#video-parallax .software-box::after {
    content: counter(reasonCounter, decimal-leading-zero);
    position: absolute;
    top: -14px;
    right: 12px;
    font-size: 72px;
    font-weight: 800;
    color: rgba(31, 81, 107, 0.06);
    line-height: 1;
    z-index: 0;
    pointer-events: none;
}

#video-parallax .software-box h3,
#video-parallax .software-box .normalpara1,
#video-parallax .reason-icon-tile {
    position: relative;
    z-index: 1;
}

#video-parallax .reason-icon-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin: 0 0 16px;
    border-radius: 12px;
    color: #fff;
    font-size: 22px;
    background: #1F516B;
}

#video-parallax .software-box h3 {
    margin: 0 0 10px;
}

#video-parallax .software-box:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.1);
    border-color: rgba(59, 161, 198, 0.4);
}

#video-parallax .col-12:nth-of-type(6n+2) .reason-icon-tile { background: #3BA1C6; }
#video-parallax .col-12:nth-of-type(6n+3) .reason-icon-tile { background: #2891b5; }
#video-parallax .col-12:nth-of-type(6n+4) .reason-icon-tile { background: #5ec5e8; }
#video-parallax .col-12:nth-of-type(6n+5) .reason-icon-tile { background: #143B59; }
#video-parallax .col-12:nth-of-type(6n+6) .reason-icon-tile { background: #1b7f9e; }

.card-text strong {
    color: #1F516B;
    font-weight: 700;
}

/* Colorful Stats Card */
.stats-colorful-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
}

.stat-colorful {
    background: #ffffff;
    border-radius: 18px;
    padding: 20px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.stat-colorful::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
}

.stat-orange {
    border-color: rgba(59, 161, 198, 0.3);
}

.stat-orange::before {
    background: linear-gradient(90deg, #3BA1C6, #5ec5e8);
}

.stat-orange:hover {
    border-color: #3BA1C6;
/*    box-shadow: 0 10px 25px rgba(59, 161, 198, 0.3);
    transform: translateY(-3px);*/
}

.stat-green {
    border-color: rgba(94, 197, 232, 0.3);
}

.stat-green::before {
    background: linear-gradient(90deg, #5ec5e8, #7dd3ee);
}

.stat-green:hover {
    border-color: #5ec5e8;
    box-shadow: 0 10px 25px rgba(94, 197, 232, 0.3);
    transform: translateY(-3px);
}

.stat-pink {
    border-color: rgba(31, 81, 107, 0.3);
}

.stat-pink::before {
    background: linear-gradient(90deg, #1F516B, #2891b5);
}

.stat-pink:hover {
    border-color: #1F516B;
    box-shadow: 0 10px 25px rgba(31, 81, 107, 0.3);
    transform: translateY(-3px);
}

.stat-icon {
    font-size: 2.2rem;
    margin-bottom: 12px;
    transition: all 0.3s ease;
}

.stat-orange .stat-icon {
    color: #3BA1C6;
}

.stat-green .stat-icon {
    color: #5ec5e8;
}

.stat-pink .stat-icon {
    color: #1F516B;
}

.stat-colorful .stat-number {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 6px;
}

.stat-orange .stat-number {
    background: linear-gradient(135deg, #3BA1C6, #5ec5e8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-green .stat-number {
    background: linear-gradient(135deg, #5ec5e8, #7dd3ee);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-pink .stat-number {
    background: linear-gradient(135deg, #1F516B, #2891b5);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-colorful .stat-label {
    display: block;
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Responsive Design */
@media (max-width: 992px) {
    .about-creative-section {
        padding: 30px 0;
    }

    .creative-main-title {
        font-size: 2rem;
    }

    .intro-highlight-card {
        flex-direction: column;
        text-align: center;
        padding: 20px 25px;
    }

    .card-icon-large {
        width: 70px;
        height: 70px;
        font-size: 2rem;
    }

    .stats-colorful-card {
        flex-direction: row;
        gap: 10px;
    }

    .stat-colorful {
        flex: 1;
    }
}

@media (max-width: 768px) {
    .about-creative-section {
        padding: 25px 0;
    }

    .creative-main-title {
        font-size: 1.8rem;
    }

    .intro-highlight-card {
        padding: 18px 20px;
    }

    .intro-highlight-card .card-icon {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }

    .intro-highlight-card .intro-text {
        font-size: 1rem;
    }

    .creative-info-card {
        padding: 20px;
    }

    .card-heading {
        font-size: 1.2rem;
    }

    .card-icon-large {
        width: 60px;
        height: 60px;
        font-size: 1.8rem;
    }

    .stat-colorful .stat-number {
        font-size: 1.8rem;
    }

    .stat-icon {
        font-size: 2rem;
    }

    .location-badge {
        font-size: 0.75rem;
        padding: 5px 10px;
    }
}

@media (max-width: 576px) {
    .about-creative-section {
        padding: 20px 0;
    }

    .creative-main-title {
        font-size: 1.5rem;
    }

    .creative-subtitle {
        font-size: 0.7rem;
        letter-spacing: 2px;
        padding: 6px 12px;
    }

    .stats-colorful-card {
        flex-direction: column;
    }

    .card-badge {
        font-size: 0.7rem;
        padding: 4px 10px;
    }
}

/* Responsive Design for AI Tools Cards */
@media (max-width: 1200px) {
    .section-category-title {
        font-size: 1.65rem;
    }
}

@media (max-width: 992px) {
    .productivity-automation-section {
        padding: 25px 0;
    }

    .section-main-title {
        font-size: 2.2rem;
    }

    .tools-section-wrapper {
        margin-bottom: 40px !important;
    }

    .ai-tool-card-compact {
        padding: 35px 25px;
    }
}

@media (max-width: 768px) {
    .productivity-automation-section {
        padding: 60px 0;
    }

    .section-main-title {
        font-size: 2rem;
    }

    .section-subtitle {
        font-size: 1rem;
    }

    .section-category-header {
        margin-bottom: 18px;
    }

    .category-badge-icon {
        width: 45px;
        height: 45px;
    }

    .category-badge-icon i {
        font-size: 20px;
    }

    .section-category-title {
        font-size: 1.3rem;
    }

    .ai-tool-card-compact {
        padding: 20px 18px;
    }

    .tool-card-logo {
        width: 55px;
        height: 55px;
        margin-bottom: 12px;
    }

    .tool-card-logo img {
        width: 38px;
        height: 38px;
    }

    .tool-card-title {
        font-size: 1rem;
        min-height: 26px;
    }

    .tool-card-percentage {
        font-size: 1.6rem;
    }

    .launch-cta-button {
        padding: 18px 40px;
        font-size: 1.05rem;
    }
}

@media (max-width: 576px) {
    .productivity-automation-section {
        padding: 50px 0;
    }

    .section-main-title {
        font-size: 1.75rem;
    }

    .section-subtitle {
        font-size: 0.95rem;
    }

    .section-category-header {
        gap: 10px;
        margin-bottom: 15px;
    }

    .category-badge-icon {
        width: 42px;
        height: 42px;
    }

    .category-badge-icon i {
        font-size: 18px;
    }

    .section-category-title {
        font-size: 1.2rem;
    }

    .ai-tool-card-compact {
        padding: 20px 18px;
    }

    .tool-card-logo {
        width: 50px;
        height: 50px;
        margin-bottom: 10px;
    }

    .tool-card-logo img {
        width: 35px;
        height: 35px;
    }

    .tool-card-title {
        font-size: 0.95rem;
        min-height: 24px;
        margin-bottom: 8px;
    }

    .tool-card-percentage {
        font-size: 1.5rem;
        margin-top: 8px;
        padding-top: 8px;
    }

    .launch-cta-button {
        padding: 16px 35px;
        font-size: 1rem;
    }

    .cta-subtitle {
        font-size: 0.85rem;
    }
}

/* Tools Grid Container - New 2-Column Layout */
.tools-grid-container {
    padding: 0rem 0;
}

.tool-grid-item {
    display: flex;
    align-items: center;
    padding: 1rem;
/*    border: 2px solid #1f2471;*/
    border-radius: 8px;
    background: #fff;
    transition: all 0.3s ease;
    height: 100%;
}

.tool-grid-item:hover {
    box-shadow: 0 4px 12px rgba(31, 36, 113, 0.2);
    transform: translateY(-3px);
}

.tool-grid-icon {
    width: 50px;
    height: 50px;
    min-width: 50px;
    max-width: 50px;
    border-radius: 50%;
/*    border: 2px solid #1f2471;*/
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1.25rem;
    background: #fff;
    flex-shrink: 0;
}

.tool-grid-icon img {
    width: 30px;
    height: 30px;
    max-width: 30px;
    max-height: 30px;
    object-fit: contain;
}

.tool-icon-placeholder {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1f2471;
}

.tool-grid-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.tool-grid-title {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: #1a1a1a;
    line-height: 1.3;
}

.tool-grid-text {
    font-size: 1rem;
    color: #666;
    margin: 0;
    line-height: 1.4;
}

/* Responsive Design for Tools Grid */
@media (max-width: 768px) {
    .tool-grid-item {
        padding: 1rem 1.25rem;
    }

    .tool-grid-icon {
        width: 45px;
        height: 45px;
        min-width: 45px;
        max-width: 45px;
        margin-right: 1rem;
    }

    .tool-grid-icon img {
        width: 28px;
        height: 28px;
        max-width: 28px;
        max-height: 28px;
    }

    .tool-grid-title {
        font-size: 0.95rem;
    }

    .tool-grid-text {
        font-size: 0.8rem;
    }
}

@media (max-width: 576px) {
    .tool-grid-item {
        padding: 0.875rem 1rem;
    }

    .tool-grid-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
        max-width: 40px;
        margin-right: 0.875rem;
    }

    .tool-grid-icon img {
        width: 25px;
        height: 25px;
        max-width: 25px;
        max-height: 25px;
    }

    .tool-grid-title {
        font-size: 0.875rem;
    }

    .tool-grid-text {
        font-size: 0.75rem;
    }

    .tool-icon-placeholder {
        font-size: 1.1rem;
    }
}

.HireBtn {
    border: 2px solid white;
    border-radius: initial !important;
    background-color: #3BA1C6;
    color: white !important;
}
.HireBtn:hover{
    background-color:var(--dark-purple);
}

/* Responsive Navbar Fixes */
@media (max-width: 991px) {
    /* Enable dropdowns on mobile */
    .dropdown-menu {
        display: block !important;
        position: static !important;
        float: none;
        width: 100%;
        margin-top: 0;
        background-color: #0d2d44;
        border: none;
        box-shadow: none;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-in-out;
    }

    /* Show dropdown when toggled */
    .dropdown-menu.show {
        max-height: 2000px !important;
        overflow-y: auto;
    }

    /* Style mega menu for mobile */
    .mega-menu {
        min-width: 100% !important;
        padding: 10px 0 !important;
    }

    .mega-menu .row {
        margin: 0 !important;
    }

    .mega-menu .col-lg-3,
    .mega-menu .col-lg-4,
    .mega-menu .col-md-3,
    .mega-menu .col-md-4 {
        width: 100%;
        padding: 0;
    }

    .mega-menu ul {
        margin-bottom: 10px;
    }

    .mega-menu .dropdown-item {
        color: #fff;
        padding: 8px 20px;
    }

    .mega-menu .dropdown-item:hover {
        background-color: #1f516b;
    }

    .mega-menu ul li h3.fontbold {
        color: #3BA1C6;
        font-size: 13px;
        padding: 8px 20px;
        margin-top: 5px;
        margin-bottom: 5px;
    }

    /* Fix navbar collapse alignment */
    .navbar-collapse {
        text-align: left;
    }

    .navbar-nav {
        width: 100%;
    }

    .nav-item {
        width: 100%;
    }

    .nav-link {
        padding: 10px 15px !important;
    }

    /* Tech button responsive */
    .tech-button {
        display: block;
        width: 90%;
        margin: 10px auto;
        text-align: center;
    }

    /* Fix pointer events on mobile dropdowns */
    .dropdown-toggle.pointer-none {
        pointer-events: auto !important;
    }
}

/* Ensure proper collapse behavior */
@media (max-width: 991px) {
    .navbar-collapse.collapsing {
        transition: height 0.35s ease;
    }

    .navbar-collapse.show {
        display: block !important;
    }
}