#tooltip {
        display: none;
        position: absolute;
        background-color: #333;
        color: white;
        padding: 10px;
        border-radius: 5px;
        z-index: 9999;
    }

    #tooltip[data-show] {
        display: block;
    }

    .check-icon {
        font-size: 30px !important;
        color: #933ff9;
        margin-right: 10px;
    }

    .col-md-12.populer {
        background-color: #edecfd;
    }

    .card-name {
        border-right: 1px solid #dcdcdc;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        font-weight: 700;
        flex-wrap: wrap;
    }

    .card-name img {
        width: 40px;
    }

    .card-context {
        color: #000 !important;
        border-right: 1px solid #dcdcdc;
    }

    .content svg {
        color: #933ff9;
        margin-right: 10px;
    }

    .content {
        display: flex;
        align-items: center;
        font-size: 0.8rem;
        color: #808080;
        margin-bottom: 10px;
    }

    .border-right {
        border-right: 1px solid #ccc;
    }

    .border-left {
        border-left: 1px solid #ccc;
    }

    .border-bottom {
        border-bottom: 1px solid #ccc;
    }

    .price-content {
        font-size: 30px;
    }

    .price-content span {
        font-size: 10px;
    }

    .card-price {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .btn-primary-buy-now:hover svg {
        color: #fff;
    }

    /* Pricing Section Styles */
    .pricing-section {
        padding: 80px 0;
        background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%);
    }

    .pricing-title {
        text-align: center;
        margin-bottom: 60px;
    }

    .pricing-title h2 {
        font-size: 2.8rem;
        font-weight: 700;
        background: linear-gradient(135deg, #933ff9, #7A29DD);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 20px;
    }

    .pricing-title p {
        font-size: 1.2rem;
        color: #666;
        max-width: 700px;
        margin: 0 auto;
    }

    .pricing-tabs {
        display: flex;
        justify-content: center;
        margin-bottom: 40px;
        background: white;
        border-radius: 15px;
        padding: 8px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        max-width: 900px;
        margin: 0 auto 40px;
        overflow-x: auto;
    }

    .tab-button {
        flex: 1;
        padding: 15px 20px;
        border: none;
        background: transparent;
        border-radius: 10px;
        cursor: pointer;
        transition: all 0.3s ease;
        font-weight: 600;
        font-size: 0.9rem;
        color: #666;
        white-space: nowrap;
        min-width: 150px;
    }

    .tab-button.active {
        background: linear-gradient(135deg, #933ff9, #7A29DD);
        color: white;
        box-shadow: 0 5px 15px rgba(147, 63, 249, 0.3);
    }

    .tab-button:hover:not(.active) {
        background: rgba(147, 63, 249, 0.1);
        color: #933ff9;
    }

    .tab-content {
        display: none;
        animation: fadeIn 0.5s ease;
    }

    .tab-content.active {
        display: block;
    }

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

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

    .pricing-card {
        background: white;
        border-radius: 20px;
        box-shadow: 0 20px 60px rgba(147, 63, 249, 0.1);
        border: 2px solid transparent;
        background-clip: padding-box;
        max-width: 1200px;
        margin: 0 auto;
        overflow: hidden;
        position: relative;
    }

    .pricing-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(135deg, #933ff9, #7A29DD);
    }

    .pricing-header {
        padding: 40px;
        text-align: center;
        background: linear-gradient(135deg, rgba(147, 63, 249, 0.05), rgba(122, 41, 221, 0.05));
        border-bottom: 1px solid #f0f0f0;
    }

    .pricing-header h3 {
        font-size: 1.8rem;
        font-weight: 700;
        color: #933ff9;
        margin-bottom: 10px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .pricing-header p {
        color: #666;
        font-size: 1.1rem;
        margin: 0;
    }

    .services-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
        gap: 0;
    }

    .service-item {
        padding: 30px 40px;
        border-bottom: 1px solid #f0f0f0;
        border-right: 1px solid #f0f0f0;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 120px;
    }

    .service-item:hover {
        background: linear-gradient(135deg, rgba(147, 63, 249, 0.05), rgba(122, 41, 221, 0.05));
        transform: translateX(5px);
    }

    .service-item:nth-child(even) {
        border-right: none;
    }

    .service-item:last-child,
    .service-item:nth-last-child(2) {
        border-bottom: none;
    }

    .service-info {
        display: flex;
        align-items: center;
        gap: 20px;
        flex: 1;
    }

    .service-icon {
        width: 60px;
        height: 60px;
        background: linear-gradient(135deg, #933ff9, #7A29DD);
        border-radius: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 24px;
        flex-shrink: 0;
        box-shadow: 0 5px 15px rgba(147, 63, 249, 0.3);
    }

    .service-details h4 {
        font-size: 1.2rem;
        font-weight: 600;
        color: #333;
        margin: 0 0 8px 0;
    }

    .service-details p {
        color: #666;
        margin: 0;
        font-size: 0.95rem;
        line-height: 1.5;
    }

    .service-price {
        text-align: right;
        min-width: 120px;
    }

    .price-value {
        font-size: 1.6rem;
        font-weight: 700;
        color: #933ff9;
        display: block;
    }

    .price-period {
        font-size: 0.9rem;
        color: #999;
        margin-top: 4px;
        display: block;
    }

    .price-free {
        font-size: 1.4rem;
        font-weight: 600;
        color: #4CAF50;
    }


    .cross-connect-card .services-grid {
        grid-template-columns: 1fr;
    }

    .cross-connect-card .service-item {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr 1.5fr;
        gap: 20px;
        align-items: center;
        border-right: none;
    }

    .cross-connect-card .service-info {
        grid-column: 1;
    }

    .cross-connect-card .setup-fee,
    .cross-connect-card .monthly-fee,
    .cross-connect-card .specifications {
        text-align: center;
        font-weight: 600;
    }

    .cross-connect-card .setup-fee {
        color: #FF9800;
    }

    .cross-connect-card .monthly-fee {
        color: #933ff9;
    }

    .cross-connect-card .specifications {
        color: #666;
        font-size: 0.9rem;
    }

    .professional-card .service-item {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr 2fr;
        gap: 20px;
        align-items: center;
        border-right: none;
    }


    .icon-server {
        background: linear-gradient(135deg, #4CAF50, #45a049);
    }

    .icon-shield {
        background: linear-gradient(135deg, #2196F3, #1976D2);
    }

    .icon-backup {
        background: linear-gradient(135deg, #FF9800, #F57C00);
    }

    .icon-migration {
        background: linear-gradient(135deg, #9C27B0, #7B1FA2);
    }

    .icon-setup {
        background: linear-gradient(135deg, #00BCD4, #0097A7);
    }

    .icon-cloud {
        background: linear-gradient(135deg, #607D8B, #455A64);
    }

    .icon-power {
        background: linear-gradient(135deg, #F44336, #D32F2F);
    }

    .icon-network {
        background: linear-gradient(135deg, #3F51B5, #303F9F);
    }

    .icon-tools {
        background: linear-gradient(135deg, #795548, #5D4037);
    }


    .sla-section {
        margin-top: 50px;
        padding: 40px 0;
        background: linear-gradient(135deg, rgba(147, 63, 249, 0.02), rgba(122, 41, 221, 0.02));
        border-radius: 15px;
    }

    .sla-header {
        text-align: center;
        margin-bottom: 30px;
    }

    .sla-header h4 {
        font-size: 1.8rem;
        font-weight: 700;
        color: #933ff9;
        margin-bottom: 10px;
    }

    .sla-header p {
        color: #666;
        font-size: 1.1rem;
    }

    .sla-table-container {
        overflow-x: auto;
        padding: 0 20px;
    }

    .sla-table {
        min-width: 800px;
        background: white;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        overflow: hidden;
    }

    .sla-header-row {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr 1fr;
        background: linear-gradient(135deg, #933ff9, #7A29DD);
        color: white;
    }

    .sla-row {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr 1fr;
        border-bottom: 1px solid #f0f0f0;
    }

    .sla-row:last-child {
        border-bottom: none;
    }

    .sla-row:hover {
        background: rgba(147, 63, 249, 0.05);
    }

    .sla-feature {
        padding: 20px;
        font-weight: 600;
        border-right: 1px solid rgba(255, 255, 255, 0.2);
        display: flex;
        align-items: center;
    }

    .sla-header-row .sla-feature {
        color: white;
        font-size: 1.1rem;
    }

    .sla-plan {
        padding: 20px;
        text-align: center;
        border-right: 1px solid rgba(255, 255, 255, 0.2);
    }

    .sla-plan:last-child {
        border-right: none;
    }

    .sla-plan-name {
        font-size: 1.2rem;
        font-weight: 700;
        margin-bottom: 5px;
    }

    .sla-plan-price {
        font-size: 0.9rem;
        opacity: 0.9;
    }

    .sla-value {
        padding: 20px;
        text-align: center;
        border-right: 1px solid #f0f0f0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 500;
    }

    .sla-value:last-child {
        border-right: none;
    }

    .sla-value i {
        font-size: 1.2rem;
    }

    .sla-value.price {
        font-size: 1.1rem;
        font-weight: 700;
        color: #933ff9;
    }

    .sla-small {
        font-size: 0.85rem;
        line-height: 1.3;
    }

    .text-success {
        color: #4CAF50 !important;
    }

    .text-danger {
        color: #f44336 !important;
    }


    .sla1 {
        background: linear-gradient(135deg, #4CAF50, #45a049);
    }

    .sla2 {
        background: linear-gradient(135deg, #2196F3, #1976D2);
    }

    .sla3 {
        background: linear-gradient(135deg, #FF9800, #F57C00);
    }

    @media (max-width: 768px) {
        .pricing-tabs {
            flex-direction: column;
            gap: 8px;
            padding: 15px;
        }

        .tab-button {
            min-width: auto;
            padding: 12px 15px;
            font-size: 0.85rem;
        }

        .services-grid {
            grid-template-columns: 1fr;
        }

        .service-item {
            border-right: none !important;
            flex-direction: column;
            text-align: center;
            gap: 20px;
            padding: 25px 20px;
            min-height: auto;
        }

        .service-info {
            flex-direction: column;
            text-align: center;
            gap: 15px;
        }

        .service-price {
            text-align: center;
            min-width: auto;
        }

        .cross-connect-card .service-item,
        .professional-card .service-item {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .pricing-title h2 {
            font-size: 2.2rem;
        }

        .sla-table {
            min-width: 600px;
        }

        .sla-header-row,
        .sla-row {
            grid-template-columns: 1.5fr 1fr 1fr 1fr;
        }

        .sla-feature,
        .sla-plan,
        .sla-value {
            padding: 15px 10px;
            font-size: 0.9rem;
        }

        .sla-plan-name {
            font-size: 1rem;
        }
    }

    @media (max-width: 767px) {
        .card-name {
            margin-top: 20px;
        }

        .card-price {
            margin-bottom: 20px;
        }

        .card-context {
            color: #000 !important;
            border-right: none !important;
            text-align: center !important;
            padding-bottom: 30px;
            padding-top: 30px;
        }

        .border-right {
            border-right: none;
        }

        .content {
            justify-content: center !important;
        }
    }

    .icon-power {
        background: linear-gradient(135deg, #F44336, #D32F2F);
    }

    .icon-power-medium {
        background: linear-gradient(135deg, #FF9800, #F57C00);
    }

    .icon-power-high {
        background: linear-gradient(135deg, #4CAF50, #45a049);
    }

    /* Cross-connect card specific styling */
    .cross-connect-card .services-grid {
        grid-template-columns: 1fr;
    }

    .cross-connect-card .service-item {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr 1.5fr;
        gap: 20px;
        align-items: center;
        border-right: none;
    }

    .cross-connect-card .service-info {
        grid-column: 1;
    }

    .cross-connect-card .setup-fee,
    .cross-connect-card .monthly-fee,
    .cross-connect-card .specifications {
        text-align: center;
        font-weight: 600;
    }

    .cross-connect-card .setup-fee {
        color: #FF9800;
    }

    .cross-connect-card .monthly-fee {
        color: #933ff9;
    }

    .cross-connect-card .specifications {
        color: #666;
        font-size: 0.9rem;
    }


    @media (max-width: 768px) {
        .cross-connect-card .service-item {
            display: flex;
            flex-direction: column;
            gap: 15px;
            text-align: center;
        }
    }