/* =-======================================================================================================== */
    body {
        font-family: 'Bodoni Grotesk', Arial, 'Inter', sans-serif !important;
    }

    /* nav bar blink icon */
    /* Blinking Icon Animation */
    .generate-btn svg path {
        fill     : #335fff;
        opacity  : 0.3;
        animation: blink 1.8s infinite;
    }

    .generate-btn svg path:nth-child(1) {
        animation-delay: 0s;
    }

    .generate-btn svg path:nth-child(2) {
        animation-delay: 0.4s;
    }

    .generate-btn svg path:nth-child(3) {
        animation-delay: 0.8s;
    }

    @keyframes blink {
        0% {
            opacity: 0.3;
        }

        30% {
            opacity: 1;
        }

        60% {
            opacity: 0.3;
        }

        100% {
            opacity: 0.3;
        }
    }

    .generate-btn:hover svg path {
        animation-duration: 1s;
    }

    /* Navbar Glassmorphism */
    .navbar {
        padding        : 0.7rem 0;
        backdrop-filter: blur(0px);
        background     : transparent;
        transition     : all 0.5s ease;
    }

    .navbar.scrolled {
        padding        : 0.75rem 0;
        backdrop-filter: blur(20px);
        background     : #ffffffb3;
        border-bottom  : 1px solid rgba(255, 255, 255, 0.1);
        box-shadow     : 0 8px 32px 0 rgba(0, 0, 0, 0.37),
            0 0 20px 0 rgba(168, 85, 247, 0.1);
    }

    /* Navigation Links */
    .nav-link {
        position   : relative;
        color      : #1e3a8a;
        font-weight: 700;
        padding    : 0.5rem 0;
        transition : color 0.3s ease;
        display    : inline-block;
    }

    .nav-link::after {
        content      : "";
        position     : absolute;
        bottom       : 0;
        left         : 0;
        width        : 0;
        height       : 2px;
        background   : linear-gradient(90deg, #1e3a8a, #60a5fa);
        transition   : width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        border-radius: 2px;
    }

    .nav-link:hover {
        color: #294ba7aa;
    }

    .nav-link:hover::after {
        width: 100%;
    }

    /* Chevron Rotation */
    .chevron-icon {
        transition: transform 0.3s ease;
    }

    .group:hover .chevron-icon {
        transform: rotate(180deg);
    }

    /* Mobile Menu Button */
    .mobile-menu-btn {
        display       : flex;
        flex-direction: column;
        gap           : 0.375rem;
        background    : transparent;
        border        : none;
        cursor        : pointer;
        padding       : 0.5rem;
        transition    : all 0.3s ease;
    }

    .hamburger-line {
        width        : 1.5rem;
        height       : 2px;
        background   : #1e3a8a;
        border-radius: 2px;
        transition   : all 0.3s ease;
    }

    .mobile-menu-btn:hover .hamburger-line {
        background: linear-gradient(90deg, #a855f7, #3b82f6);
    }

    .mobile-menu-btn.active .hamburger-line:nth-child(1) {
        transform: rotate(45deg) translateY(0.5rem);
    }

    .mobile-menu-btn.active .hamburger-line:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-btn.active .hamburger-line:nth-child(3) {
        transform: rotate(-45deg) translateY(-0.5rem);
    }

    /* Mobile Menu Overlay */
    .mobile-menu {
        position      : fixed;
        top           : 0;
        left          : -100%;
        bottom        : 0;
        width         : 320px;
        max-width     : 85%;
        background    : linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
        z-index       : 100;
        display       : flex;
        flex-direction: column;
        transition    : left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow    : 2px 0 20px rgba(0, 0, 0, 0.3);
        overflow-y    : auto;
    }

    .mobile-menu.active {
        left: 0;
    }

    /* Mobile Menu Backdrop */
    .mobile-menu-backdrop {
        position       : fixed;
        top            : 0;
        left           : 0;
        right          : 0;
        bottom         : 0;
        background     : rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(4px);
        z-index        : 99;
        opacity        : 0;
        visibility     : hidden;
        transition     : opacity 0.3s ease, visibility 0.3s ease;
    }

    .mobile-menu-backdrop.active {
        opacity   : 1;
        visibility: visible;
    }

    /* Mobile Navigation Items Animation */
    @keyframes slideInLeft {
        from {
            opacity  : 0;
            transform: translateX(-30px);
        }

        to {
            opacity  : 1;
            transform: translateX(0);
        }
    }

    .mobile-nav-item {
        opacity: 0;
    }

    .mobile-menu.active .mobile-nav-item {
        animation: slideInLeft 0.4s ease forwards;
    }

    .mobile-menu.active .mobile-nav-item:nth-child(1) {
        animation-delay: 0.1s;
    }

    .mobile-menu.active .mobile-nav-item:nth-child(2) {
        animation-delay: 0.15s;
    }

    .mobile-menu.active .mobile-nav-item:nth-child(3) {
        animation-delay: 0.2s;
    }

    .mobile-menu.active .mobile-nav-item:nth-child(4) {
        animation-delay: 0.25s;
    }

    .mobile-menu.active .mobile-nav-item:nth-child(5) {
        animation-delay: 0.3s;
    }

    /* Mobile Dropdown */
    .mobile-dropdown {
        max-height: 0;
        overflow  : hidden;
        transition: max-height 0.4s ease, padding 0.4s ease;
    }

    .mobile-dropdown.active {
        max-height : 500px;
        padding-top: 0.5rem;
    }

    /* Mobile Dropdown Toggle Icon */
    .mobile-dropdown-icon {
        transition: transform 0.3s ease;
    }

    .mobile-dropdown-icon.active {
        transform: rotate(180deg);
    }

    /* Ripple Effect */
    .ripple {
        position      : absolute;
        border-radius : 50%;
        background    : rgba(255, 255, 255, 0.4);
        transform     : scale(0);
        animation     : ripple-animation 0.6s ease-out;
        pointer-events: none;
    }

    @keyframes ripple-animation {
        to {
            transform: scale(4);
            opacity  : 0;
        }
    }

    /* Responsive Adjustments */
    @media (max-width: 768px) {
        .navbar {
            padding: 1rem 0;
        }

        .navbar.scrolled {
            padding: 0.75rem 0;
        }
    }

    /* Social Icons Hover Effect */
    .social-icon {
        transition: all 0.3s ease;
    }

    .social-icon:hover {
        transform: translateY(-3px);
    }

    /* Scrollbar Styling for Mobile Menu */
    .mobile-menu::-webkit-scrollbar {
        width: 4px;
    }

    .mobile-menu::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.05);
    }

    .mobile-menu::-webkit-scrollbar-thumb {
        background   : rgba(255, 255, 255, 0.2);
        border-radius: 2px;
    }

    /* end nav bar */

    /* Hero Section */
    .btn {
        padding        : 1rem 2rem;
        border         : none;
        border-radius  : 5px;
        font-size      : 1rem;
        cursor         : pointer;
        transition     : all 0.3s;
        text-decoration: none;
        display        : inline-block;
    }

    .btn-primary {
        background : #1e3a8a;
        color      : #0a0e27;
        font-weight: bold;
    }

    .btn-primary:hover {
        background: #00b8e6;
        transform : translateY(-2px);
        box-shadow: 0 5px 20px rgba(0, 212, 255, 0.3);
    }

    .btn-secondary {
        background: transparent;
        color     : #1e3a8a;
        border    : 2px solid #1e3a8a;
    }

    .btn-secondary:hover {
        background: rgba(0, 212, 255, 0.1);
    }

    /* end hero seciton */

    @media (max-width: 768px) {
        .nav-links {
            position      : fixed;
            left          : -100%;
            top           : 70px;
            flex-direction: column;
            background    : rgba(10, 14, 39, 0.98);
            width         : 100%;
            padding       : 2rem;
            transition    : 0.3s;
        }

        .nav-links.active {
            left: 0;
        }

        .menu-toggle {
            display: flex;
        }
    }

    @media (max-width: 480px) {
        nav {
            padding: 1rem 5%;
        }

        .btn {
            width     : 100%;
            text-align: center;
        }
    }


    .newcta-bg-image {
        background-image   : url(https://webmobtechcdn.nyc3.cdn.digitaloceanspaces.com/wmt_v4/2025/04/CTA.png);
        background-position: 50% !important;
        background-size    : cover !important;
        background-repeat  : no-repeat;
    }

    @keyframes pulse {

        0%,
        100% {
            opacity  : 1;
            transform: scale(1);
        }

        50% {
            opacity  : 0.7;
            transform: scale(1.1);
        }
    }

    .faq-item.active {
        border-color: #3b82f6;
        box-shadow  : 0 10px 25px rgba(59, 130, 246, 0.15);
    }

    .faq-item.active .icon {
        transform: rotate(45deg);
    }

    /* generative-ai-development-services page style */
    /* slider */
    .slider-container {
        scroll-behavior: smooth;
    }

    .slider-container::-webkit-scrollbar {
        display: none;
    }

    .slider-container {
        -ms-overflow-style: none;
        scrollbar-width   : none;
    }

    .process-card {
        flex: 0 0 100%;
    }

    @media (min-width: 640px) {
        .process-card {
            flex: 0 0 50%;
        }
    }

    @media (min-width: 1024px) {
        .process-card {
            flex: 0 0 33.3333%;
        }
    }

    /* end slider */

    /* Ideal Tech Stack We Use for Computer Vision Solution */
    .tech-content {
        display: none;
    }

    .tech-content.active {
        display: grid;
    }

    .menu-item {
        transition: all 0.3s ease;
        cursor    : pointer;
    }

    .menu-item.active {
        background: rgba(255, 255, 255, 0.15);
    }

    .tech-card {
        animation: fadeInUp 0.4s ease;
    }

    @keyframes fadeInUp {
        from {
            opacity  : 0;
            transform: translateY(20px);
        }

        to {
            opacity  : 1;
            transform: translateY(0);
        }
    }

    /* Hide default details marker */
    details>summary {
        list-style: none;
    }

    details>summary::-webkit-details-marker {
        display: none;
    }

    /* end Ideal Tech Stack We Use for Computer Vision Solution */
    .card-shadow {
        box-shadow:
            0 10px 30px rgba(37, 99, 235, 0.12),
            0 4px 10px rgba(59, 130, 246, 0.08);
    }

    /* home page our ai solution */

    /* home page our ai solution */
    /* ================= Our AI Development Process ================= */
    @media (min-width: 1024px) {
        .custom-card {
            flex      : 1;
            transition: all 0.7s cubic-bezier(0.25, 1, 0.3, 1);
            cursor    : pointer;
        }

        .custom-accordion-wrapper:hover .custom-card:hover,
        .custom-accordion-wrapper:not(:hover) .custom-card.active {
            flex: 6;
        }

        .custom-card-reveal {
            opacity     : 0;
            visibility  : hidden;
            transform   : translateX(20px);
            transition  : all 0.4s ease;
            display     : flex;
            align-items : center;
            padding-left: 1.5rem;
            flex-grow   : 1;
            min-width   : 260px;
        }

        .custom-accordion-wrapper:hover .custom-card:hover .custom-card-reveal,
        .custom-accordion-wrapper:not(:hover) .custom-card.active .custom-card-reveal {
            opacity         : 1;
            visibility      : visible;
            transform       : translateX(0);
            transition-delay: 0.2s;
        }
    }

    /* ==================== TABLET STYLES (768px - 1023px) ==================== */
    @media (min-width: 768px) and (max-width: 1023px) {
        .custom-accordion-wrapper {
            flex-direction: column !important;
            height        : auto !important;
            gap           : 0;
        }

        .custom-card {
            min-width    : 100% !important;
            width        : 100%;
            border-left  : none !important;
            border-right : none !important;
            border-bottom: 1px solid #d1d5db;
            cursor       : pointer;
            transition   : all 0.3s ease;
        }

        .custom-card:last-child {
            border-bottom: none;
        }

        .custom-card>div {
            flex-direction: row !important;
            align-items   : center !important;
            padding       : 1.75rem 2rem !important;
            gap           : 1.5rem;
        }

        .custom-card>div>div:first-child {
            flex-direction: row !important;
            align-items   : center !important;
            gap           : 1.5rem;
            width         : auto !important;
            padding-right : 0 !important;
            flex-shrink   : 0;
        }

        .custom-card>div>div:first-child span {
            font-size  : 2.5rem !important;
            line-height: 1;
        }

        .custom-card>div>div:first-child h3 {
            max-width: 200px;
            font-size: 1.125rem;
        }

        .custom-card-reveal {
            max-height  : 0;
            overflow    : hidden;
            opacity     : 0;
            visibility  : hidden;
            transition  : all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            flex-grow   : 1;
            padding-left: 0 !important;
            min-width   : 0 !important;
        }

        .custom-card-reveal p {
            padding: 0;
        }

        .custom-card.active .custom-card-reveal,
        .custom-card:hover .custom-card-reveal {
            max-height  : 300px;
            opacity     : 1;
            visibility  : visible;
            padding-left: 1rem !important;
        }

        .custom-card:hover {
            background-color: #f9fafb;
        }
    }

    /* ==================== MOBILE STYLES (below 768px) ==================== */
    @media (max-width: 767px) {
        .custom-accordion-wrapper {
            flex-direction: column !important;
            height        : auto !important;
            gap           : 0;
        }

        .custom-card {
            min-width    : 100% !important;
            width        : 100%;
            border-left  : none !important;
            border-right : none !important;
            border-bottom: 1px solid #d1d5db;
            cursor       : pointer;
            transition   : all 0.3s ease;
        }

        .custom-card:last-child {
            border-bottom: none;
        }

        .custom-card>div {
            flex-direction: column !important;
            align-items   : flex-start !important;
            padding       : 1.25rem 1.5rem !important;
            gap           : 0;
        }

        .custom-card>div>div:first-child {
            flex-direction : row !important;
            justify-content: space-between !important;
            align-items    : center !important;
            width          : 100% !important;
            padding-right  : 0 !important;
            margin-bottom  : 0;
        }

        .custom-card>div>div:first-child span {
            font-size  : 2rem !important;
            line-height: 1;
        }

        .custom-card>div>div:first-child h3 {
            font-size : 1rem !important;
            max-width : 200px !important;
            text-align: end;
        }

        .custom-card-reveal {
            max-height  : 0;
            overflow    : hidden;
            opacity     : 0;
            visibility  : hidden;
            transition  : all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            width       : 100%;
            padding-left: 0 !important;
            min-width   : 0 !important;
            margin-top  : 0;
        }

        .custom-card-reveal p {
            font-size  : 0.875rem !important;
            line-height: 1.5 !important;
            padding    : 0;
        }

        .custom-card.active .custom-card-reveal {
            max-height: 400px;
            opacity   : 1;
            visibility: visible;
            margin-top: 1rem;
        }

        .custom-card:active {
            background-color: #f9fafb;
        }
    }

    /* ================= end Our AI Development Process ================= */
    .menu-item svg.arrow {
        display: none;
    }

    .menu-item.active svg.arrow {
        display: inline-block;
    }

    .active-toc {
        color           : #2563eb;
        font-weight     : 600;
        border-left     : 3px solid #2563eb;
        background-color: #eff6ff;
    }

    .overlay-gradient {
        background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 100%);
    }


    .modal-overlay {
        display   : none;
        opacity   : 0;
        transition: opacity 0.3s ease;
    }

    .modal-overlay.active {
        display: flex;
        opacity: 1;
    }

    .modal-container {
        transform : scale(0.9);
        transition: transform 0.3s ease;
    }

    .modal-overlay.active .modal-container {
        transform: scale(1);
    }

    /* CSS-only testimonial slider */
    .testimonial-slide {
        display: none;
    }

    .nav-label {
        display: none;
    }

    /* Background gradient for left section */
    .bg-testimonial {
        background         : linear-gradient(135deg, rgba(255, 87, 34, 0.95) 0%, rgba(255, 152, 0, 0.95) 100%);
        background-size    : cover;
        background-position: center;
    }

    /* Background decoration */
    .bg-decoration::before {
        content   : '';
        position  : absolute;
        top       : -50%;
        right     : -50%;
        width     : 200%;
        height    : 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    }

    .no-scrollbar::-webkit-scrollbar {
        display: none;
    }

    .no-scrollbar {
        -ms-overflow-style: none;
        scrollbar-width   : none;
    }

    /* blog detailks page */
    .toc-item:hover,
    .toc-subitem :hover {
        background-color: #F3F4F6;
        /* gray-100 */
    }

    /* Active main item */
    .toc-item.active {
        color              : #2563eb;
        /* background-color: #EFF6FF; */
        font-weight        : 600;
        /* blue-700 */
    }

    /* Active sub-item */
    .toc-subitem.active {
        color              : #2563eb;
        /* background-color: #EFF6FF; */

    }

    /* Rotate arrow for open submenu */
    .toc-item-wrapper .rotate-90 {
        transform : rotate(90deg);
        transition: transform 0.2s;
    }

    /* end blog detailks page */
    .table-wrapper table {
        width          : 100%;
        border-collapse: collapse;
        border-radius  : 12px 12px 0 0 !important;
        border         : 2px solid #2C23E8 !important;
    }

    .table-wrapper {
        position     : relative;
        overflow-x   : auto;
        margin       : 1rem 0;
        border-radius: 12px 12px 0 0 !important;
    }

    .table thead,
    .table thead strong {
        background-color: #2C23E8;
        color           : #fff !important;
    }

    .prose thead {
        color              : #111827;
        font-weight        : 600;
        border-bottom-width: 1px;
        border-bottom-color: #9ca3af;
    }

    .table-wrapper th {
        font-weight: 600;
    }

    .table-striped tbody tr:nth-of-type(odd) {
        background-color: #f9fafb;
    }

    .prose tbody tr {
        border-bottom-width: 1px;
        border-bottom-color: #d1d5db;
    }

    .prose tbody td {
        vertical-align: top;
        padding       : .5714286em;
    }

    .table-wrapper th,
    .table-wrapper td {
        padding       : 8px !important;
        border        : 1px solid #e5e7eb;
        text-align    : left;
        vertical-align: middle;
    }

    /* Smooth scroll behavior */
    html {
        scroll-behavior: smooth;
    }

    /* Hide scrollbar for demo cleanliness */
    body {
        scrollbar-width: thin;
    }

    /* Mobile TOC Sticky Animation */
    .mobile-toc-sticky {
        transform : translateY(-100%);
        transition: transform 0.3s ease-in-out;
    }

    .mobile-toc-sticky.show {
        transform: translateY(0);

    }

    /* TOC Toggle Arrow Animation */
    .toc-toggle-arrow {
        transition: transform 0.3s ease;
    }

    .toc-toggle-arrow.open {
        transform: rotate(180deg);
    }

    /* Nested List Transition */
    .toc-nested {
        max-height: 0;
        overflow  : hidden;
        transition: max-height 0.3s ease-in-out;
    }

    .toc-nested.open {
        max-height: 500px;
    }

    /* Toggle Button Rotation */
    .toggle svg {
        transition: transform 0.2s ease;
    }

    .toggle.open svg {
        transform: rotate(90deg);
    }

    #mobileTOCContent {
        transition: max-height 0.3s ease;
    }

    /* case studie details page */
    .toc-item {
        font-size  : 0.875rem;
        line-height: 1.25rem;
    }

    .toc-subitem {
        font-size  : 0.8125rem;
        line-height: 1.125rem;
    }

    .toc-item,
    .toc-subitem {
        display        : block;
        width          : 100%;
        padding        : 0.25rem 0.5rem;
        border-radius  : 0.25rem;
        color          : #4B5563;
        /* gray-600 */
        text-decoration: none;
        transition     : background-color 0.2s, color 0.2s;
    }

    .toc-item:hover,
    .toc-subitem:hover {
        background-color: #F3F4F6;
        /* gray-100 */
    }

    /* Active main item */
    .toc-item.active {
        color      : #2c23e8;
        font-weight: 600;
    }

    /* Active sub-item */
    .toc-subitem.active {
        font-weight: 600;
        color      : #2c23e8;
        font-weight: 600;
    }

    /* Rotate arrow for open submenu */
    .toc-item-wrapper .rotate-90 {
        transform : rotate(90deg);
        transition: transform 0.2s;
    }
            .line-preview {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            display: inline;
        }

        .feature-badge { animation: pulse 2s infinite; }
        @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.8; } }
        
        .glass-effect {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        .modal-overlay {
  display: none;
}

.modal-overlay.active {
  display: flex;
}

.testimonial-slide {
  display: none;
}

/* Show active slide */
#slide1:checked ~ .testimonial-content #content1,
#slide2:checked ~ .testimonial-content #content2,
#slide3:checked ~ .testimonial-content #content3 {
  display: block;
}

/* Arrow visibility control */

.full-text {
    display: none;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

.short-text {
    transition: opacity 0.3s ease;
}