@media only screen and (min-width: 240px) and (max-width: 479px) {
    .inner, .menu-dropdown, .copyright, #sf-mobilemenu, .section_inner, .videoslider, .planbox_slider, .rightsidebar #main, .rightsidebar #sidebar, .leftsidebar #main, .leftsidebar #sidebar, .jcarousel-item-horizontal, #subheader .subdesc {
        width: 360px !important;
    }
}

.maintenance-services-card {
    border-radius: 20px;
    padding: 35px 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    height: 100%;
    display: flex;
    flex-direction: column;
    border: none;
    color: #ffffff;
    position: relative;
    overflow: hidden;
}

.maintenance-services-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.icon-wrapper {
    width: 65px;
    height: 65px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 24px;
    background-color: rgba(255, 255, 255, 0.2);
    transition: transform 0.3s ease;
}

.maintenance-services-card:hover .icon-wrapper {
    transform: scale(1.1) rotate(5deg);
}

.maintenance-services-card h4 {
    font-size: 1.25rem;
    font-weight: 700;
    color: inherit;
    margin-bottom: 16px;
    line-height: 1.4;
}

.maintenance-services-card p {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.7;
    margin-bottom: 0;
}

/* Standard Solid Colors */
.color-1 { background-color: #0d6efd; } /* Primary Blue */
.color-2 { background-color: #dc3545; } /* Danger Red */
.color-3 { background-color: #198754; } /* Success Green */
.color-4 { background-color: #ffc107; color: #212529; } /* Warning Yellow */
.color-5 { background-color: #0dcaf0; color: #212529; } /* Info Cyan */
.color-6 { background-color: #6f42c1; } /* Purple */

/* Dark text adjustments for Yellow and Cyan cards */
.color-4 p, .color-5 p {
    color: rgba(33, 37, 41, 0.85); 
}

.color-4 .icon-wrapper, .color-5 .icon-wrapper {
    background-color: rgba(0, 0, 0, 0.08);
    color: #212529;
}

.why-web-maintenance h2 {
    font-size: 35px;
    font-weight: bold;
    margin-bottom: 10px;
}

.plan-value-card {
    background-color: #ffffff;
    padding: 2.5rem 2rem;
    border-radius: 16px;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Typography styles */
.plan-title {
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 1rem;
    line-height: 1.4;
    color: #1a1a1a;
}

.plan-desc {
    color: #555555;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 0;
}

/* Hover Micro-interaction */
.plan-value-card:hover {
    transform: translateY(-8px);
}

/* --- Card 1: Monthly (Orange Theme) --- */
.card-monthly {
    border: 2px solid #f94c2a;
    box-shadow: 0 10px 30px rgba(249, 76, 42, 0.08);
}
.card-monthly .plan-title {
    color: #f94c2a;
}
.card-monthly:hover {
    box-shadow: 0 15px 35px rgba(249, 76, 42, 0.15);
}

/* --- Card 2: AMC (Dark Navy Theme) --- */
.card-amc {
    border: 2px solid #122840;
    box-shadow: 0 10px 30px rgba(18, 40, 64, 0.08);
}
.card-amc .plan-title {
    color: #122840;
}
.card-amc:hover {
    box-shadow: 0 15px 35px rgba(18, 40, 64, 0.15);
}

/* --- Card 3: Pay-As-You-Go (Deep Green Theme) --- */
.card-payg {
    border: 2px solid #72bc44;
    box-shadow: 0 10px 30px rgba(114, 188, 68, 0.08);
}
.card-payg .plan-title {
    color: #72bc44;
}
.card-payg:hover {
    box-shadow: 0 15px 35px rgba(114, 188, 68, 0.15);
}


/* --- Base Styles & Typography --- */
.platforms-sec {
    background-color: #f8f9fa; /* Light clean background */
    overflow: hidden;
}

.badge-subtitle {
    color: #f94c2a; /* Orange theme color */
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

/* --- Left Column WordPress Box --- */
.wp-highlight-box {
    background: #ffffff;
    border: 1px solid rgba(18, 40, 64, 0.1); /* Dark Navy subtle border */
    border-left: 4px solid #21759b; /* WordPress blue */
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

.wp-highlight-box .icon-box {
    color: #21759b;
}

/* --- Platform Cards Grid (Bento Style) --- */
.platforms-sec-card {
    background: #ffffff;
    padding: 2rem;
    border-radius: 16px;
    height: 100%;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 8px 24px rgba(18, 40, 64, 0.04);
    border: 1px solid rgba(0,0,0,0.03);
    position: relative;
    z-index: 1;
}

.platforms-sec-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(18, 40, 64, 0.1);
}

.card-icon {
    font-size: 2.5rem;
    margin-bottom: 1.25rem;
    display: inline-block;
    transition: transform 0.3s ease;
}

.platforms-sec-card:hover .card-icon {
    transform: scale(1.1);
}

.card-title {
    font-weight: 700;
    font-size: 1.15rem;
    margin-bottom: 0.75rem;
    color: #122840; /* Dark Navy Theme */
}

.card-text {
    font-size: 0.9rem;
    /*color: #555555;*/
    line-height: 1.6;
    margin-bottom: 0;
}

/* Specific Brand Colors for Icons */
.card-shopify .card-icon { color: #95bf47; }
.card-woo .card-icon { color: #96588a; }
.card-magento .card-icon { color: #f26322; }
.card-custom .card-icon { color: #72bc44; }

/* Staggered Grid Effect for Desktop */
@media (min-width: 768px) {
    .mt-md-4 {
        margin-top: 2rem !important;
    }
}

/* --- Bottom Migration Alert --- */
.migration-alert {
    background-color: rgba(18, 40, 64, 0.03);
    border: 1px dashed rgba(18, 40, 64, 0.15);
    max-width: 900px;
    margin: 0 auto;
}

.migration-alert p {
    font-size: 0.95rem;
    line-height: 1.7;
}

.platforms-sec-card.card-shopify {
    border: 2px solid #95bf47;
}

.platforms-sec-card.card-woo {
    border: 2px solid #96588a;
}

.platforms-sec-card.card-magento {
    border: 2px solid #f26322;
}
.platforms-sec-card.card-custom {
    border: 2px solid #72bc44;
}


/* Typography & Colors */
.header-navy {
    color: #122840; /* Dark Navy */
}

/* --- Responsive Grid Layout --- */
.services-scope-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 columns on desktop */
    gap: 20px;
    align-items: stretch;
}

/* Tablet Layout (3 columns top, 2 bottom) */
@media (max-width: 1199px) {
    .services-scope-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Mobile Layout (1 column) */
@media (max-width: 767px) {
    .services-scope-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Step Card Styling --- */
.step-card {
    background: #ffffff;
    border: 1px solid rgba(18, 40, 64, 0.05);
    border-radius: 16px;
    padding: 2.5rem 1.5rem 2rem 1.5rem;
    position: relative;
    overflow: hidden;
    z-index: 1;
    box-shadow: 0 4px 15px -5px rgb(0 0 0 / 21%);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.step-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(18, 40, 64, 0.08);
    border-color: rgba(249, 76, 42, 0.3); /* Subtle orange border on hover */
}

/* --- Number Badges (01, 02, etc.) --- */
.step-number-badge {
    background: #f94c2a; /* Brand Orange */
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 10px rgba(249, 76, 42, 0.3);
}

/* --- Large Background Watermark Numbers --- */
.step-watermark {
    position: absolute;
    top: -10px;
    right: 5px;
    font-size: 120px;
    font-weight: 900;
    color: #122840; /* Dark Navy */
    opacity: 0.05; /* Barely visible */
    line-height: 1;
    z-index: -1;
    transition: all 0.4s ease;
}

.step-card:hover .step-watermark {
    opacity: 0.06;
    transform: scale(1.05) rotate(-5deg);
}

/* --- Text Styling --- */
.step-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #122840;
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

.step-desc {
    font-size: 0.9rem;
    color: #555555;
    line-height: 1.6;
    margin: 0;
}

.mabb-card h2 {
    font-size: 26px;
    color: #f94c2a;
}

.mabb-card {
    border: 1.5px solid #f94c2a;
}



.maintenance-faq {
      position: relative;
      overflow: hidden;
      /*padding: 110px 0 120px;*/
      padding: 50px 0;
      background:
        radial-gradient(ellipse at 0% 5%, rgba(255, 119, 9, .07), transparent 32%),
        radial-gradient(ellipse at 100% 90%, rgba(25, 76, 132, .055), transparent 35%),
        var(--faq-bg);
    }

    .maintenance-faq::before {
      content: "";
      position: absolute;
      top: 70px;
      right: -100px;
      width: 300px;
      height: 300px;
      border: 1px solid rgba(255, 119, 9, .12);
      border-radius: 50%;
      pointer-events: none;
    }

    .maintenance-faq::after {
      content: "";
      position: absolute;
      top: 110px;
      right: -60px;
      width: 220px;
      height: 220px;
      border: 1px solid rgba(255, 119, 9, .10);
      border-radius: 50%;
      pointer-events: none;
    }

    .faq-container {
      position: relative;
      z-index: 1;
    }

    /* Left introduction */

    .faq-intro {
      position: sticky;
      top: 40px;
      padding-right: 28px;
    }

    .faq-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 9px 14px;
      margin-bottom: 23px;
      border: 1px solid #ffdfc7;
      border-radius: 50px;
      background: #fff8f2;
      color: #c65b0b;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
    }

    .faq-eyebrow span {
      display: inline-block;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #f94c2a;
      box-shadow: 0 0 0 4px rgba(255, 119, 9, .12);
    }

    .faq-heading {
      /*max-width: 490px;*/
      /*margin: 0 0 22px;*/
      
      /*font-size: clamp(38px, 4vw, 56px);*/
      font-weight: 700;
      /*line-height: 1.12;*/
      /*letter-spacing: -2.5px;*/
      font-size: 35px;
    }

    .faq-heading .highlight {
      position: relative;
      display: inline-block;
      color: #f94c2a;
    }

    .faq-description {
      max-width: 420px;
      margin-bottom: 30px;
      color: var(--faq-muted);
      font-size: 16px;
      line-height: 1.9;
    }

    /* Support card */

    .faq-support {
      position: relative;
      overflow: hidden;
      padding: 26px;
      border: 1px solid rgba(255, 255, 255, .12);
      border-radius: 18px;
      background: #122840;
      color: #fff;
      box-shadow: 0 15px 40px rgba(16, 36, 59, .10);
    }

    .faq-support::after {
      content: "";
      position: absolute;
      right: -35px;
      bottom: -65px;
      width: 145px;
      height: 145px;
      /*border: 25px solid rgba(255, 119, 9, .13);*/
      border: 25px solid rgb(249 76 42);
      border-radius: 50%;
      opacity: 0.6;
    }

    .faq-support-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 47px;
      height: 47px;
      margin-bottom: 19px;
      border-radius: 13px;
      background: #f94c2a;
      color: #fff;
      font-size: 22px;
    }

    .faq-support h3 {
      margin-bottom: 9px;
      /*font-family: 'Manrope', sans-serif;*/
      font-size: 19px;
      font-weight: 800;
    }

    .faq-support p {
      position: relative;
      z-index: 1;
      margin-bottom: 20px;
      color: #c4d0dd;
      font-size: 13px;
      line-height: 1.8;
    }

    .faq-contact-link {
      position: relative;
      z-index: 1;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: #fff;
      font-size: 18px;
      font-weight: 700;
      text-decoration: none;
      transition: color .25s ease, gap .25s ease;
    }

    .faq-contact-link:hover {
      gap: 15px;
      color: #ffb276;
    }

    /* Right FAQ list */

    .faq-list {
      display: flex;
      flex-direction: column;
      gap: 13px;
    }

    .faq-item {
      overflow: hidden;
      border: 1px solid var(--faq-border);
      border-radius: 15px;
      background: #fff;
      transition: border-color .3s ease, box-shadow .3s ease,
                  transform .3s ease;
    }

    .faq-item:hover {
      border-color: #ffd0ae;
      transform: translateY(-2px);
    }

    .faq-item.active {
      border-color: rgba(255, 119, 9, .55);
      box-shadow: 0 12px 35px rgba(29, 45, 65, .055);
    }

    .faq-question {
      display: flex;
      align-items: center;
      gap: 17px;
      width: 100%;
      padding: 23px 24px;
      border: 0;
      background: transparent;
      text-align: left;
      cursor: pointer;
    }

    .faq-number {
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 42px;
      width: 42px;
      height: 42px;
      border: 1px solid #edf0f4;
      border-radius: 12px;
      background: #f8f9fb;
      color: #8a96a6;
      /*font-family: 'Manrope', sans-serif;*/
      font-size: 16px;
      font-weight: 800;
      transition: background .3s ease, color .3s ease,
                  border-color .3s ease;
    }

    .faq-item.active .faq-number {
      border-color: #f94c2a;
      background: #f94c2a;
      color: #fff;
    }

    .faq-question-text {
      flex: 1;
      color: #122840;
      /*font-family: 'Manrope', sans-serif;*/
      font-size: 20px;
      font-weight: 700;
      /*line-height: 1.6;*/
    }

    .faq-toggle {
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 34px;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: #f3f5f8;
      color: var(--faq-navy);
      font-size: 17px;
      transition: background .3s ease, color .3s ease,
                  transform .35s ease;
    }

    .faq-item.active .faq-toggle {
      background: #f94c2a;
      color: #fff;
      transform: rotate(45deg);
    }

    /* Animated answer */

    .faq-answer {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows .38s ease;
    }

    .faq-item.active .faq-answer {
      grid-template-rows: 1fr;
    }

    .faq-answer-inner {
      overflow: hidden;
      min-height: 0;
    }

    .faq-answer-content {
      padding: 0 28px 25px 83px;
      color: var(--faq-muted);
      font-size: 14px;
      line-height: 1.95;
    }

    .faq-answer-content p {
      margin: 0;
    }

    .faq-answer-content strong {
      color: var(--faq-navy);
      font-weight: 700;
    }

    .faq-answer-content a {
      color: #f94c2a;
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .faq-bottom-note {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 25px;
      padding: 15px 18px;
      border: 1px dashed #dbe2eb;
      border-radius: 12px;
      color: var(--faq-muted);
      font-size: 12px;
      line-height: 1.7;
    }

    .faq-bottom-note i {
      color: #f94c2a;
      font-size: 18px;
    }

    /* Reveal animation */

    .faq-reveal {
      opacity: 0;
      transform: translateY(22px);
      transition: opacity .7s ease, transform .7s ease;
    }

    .faq-reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* Responsive */

    @media (max-width: 991.98px) {
      .maintenance-faq {
        padding: 80px 0;
      }

      .faq-intro {
        position: relative;
        top: auto;
        padding-right: 0;
        margin-bottom: 42px;
      }

      .faq-heading {
        max-width: 600px;
        font-size: clamp(38px, 7vw, 52px);
      }

      .faq-description {
        max-width: 600px;
      }

      .faq-support {
        max-width: 550px;
      }
    }

    @media (max-width: 575.98px) {
      .maintenance-faq {
        padding: 65px 0;
      }

      .faq-heading {
        font-size: 38px;
        letter-spacing: -1.7px;
      }

      .faq-description {
        font-size: 14px;
      }

      .faq-question {
        gap: 11px;
        padding: 17px 14px;
      }

      .faq-number {
        flex-basis: 34px;
        width: 34px;
        height: 34px;
        border-radius: 10px;
        font-size: 14px;
      }

      .faq-question-text {
        font-size: 13px;
      }

      .faq-toggle {
        flex-basis: 29px;
        width: 29px;
        height: 29px;
        font-size: 15px;
      }

      .faq-answer-content {
        padding: 0 18px 21px 59px;
        font-size: 13px;
      }

      .faq-support {
        padding: 23px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
      }
    }
    
    .cust-dot-cta {
    background: #f94c2a;
    color: white;
    padding: 40px 30px;
    text-align: center;
    border-radius: 30px;
}

.mep-cusr-cta p {
    color: white;
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 0px;
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    align-items: baseline;
}

.mep-cusr-cta {
    display: flex;
    justify-content: center;
    gap: 20px;
    align-items: center;
}

.cust-dot-cta p {
    color: white;
    text-align: center;
}
    
.cust-dot-cta p a {
    color: white;
    font-size: 15px;
}

@media (max-width: 768px) {
.mep-cusr-cta {
    flex-direction: column;
    gap: 0px;
}
}