.mcx-critical-communication-section {
    background-color: #f5f5f5;
    padding: 150rem 0;
}

.mcx-critical-communication-content h2 {
    margin-bottom: 50rem;
    line-height: 1.2;
}

.mcx-critical-communication-content p {
    margin-bottom: 100rem;
    line-height: 1.3;
}

.mcx-critical-communication-content .features-grid {
    display: grid;
    grid-template-columns: 1fr;
    /* Default to single column */
    gap: 40rem;
}

.mcx-critical-communication-content .feature-card:nth-child(1) {

    grid-template-columns: 148rem 1fr;
    /* Icon and text side-by-side */
    gap: 40rem;
}

.mcx-critical-communication-content .feature-card:nth-child(2),
.mcx-critical-communication-content .feature-card:nth-child(3) {

    grid-template-columns: 148rem 1fr;
    /* Icon and text side-by-side */
    gap: 40rem;
}

.feature-card {
    padding: 40rem;
    background-color: #ffffff;
    border-radius: 14rem;
}

.mcx-critical-communication-content .feature-icon img {
    width: 148rem;
    height: 148rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 40rem;
}

.mcx-critical-communication-content .feature-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20rem;
}

.mcx-critical-communication-content .feature-text h3 {
    margin-bottom: 0;
    line-height: 1.2;
}

.mcx-critical-communication-content .feature-text p {
    line-height: 1.3;
    margin-bottom: 0;
}


.mcx-critical-communication-content .features-grid {
    grid-template-columns: 1fr 1fr;
    /* Two columns for larger screens */
    grid-template-rows: auto auto;
    /* Two rows */
    gap: 40rem;
}

.mcx-critical-communication-content .feature-card:nth-child(1) {
    grid-column: 1 / -1;
    /* First card spans both columns */
}

.mcx-critical-communication-content .feature-card:nth-child(2) {
    grid-column: 1 / 2;
    /* Second card in first column */
}

.mcx-critical-communication-content .feature-card:nth-child(3) {
    grid-column: 2 / 3;
    /* Third card in second column */
}

/* Why Vodafone Business for MCX */
.mcx-applications-section {
    background: #820000;
}

.mcx-applications-section .vf-tabs .vf-tabs-nav {
    justify-content: center;
    margin-bottom: 130rem;
}

.mcx-applications-section .vf-tabs .vf-tabs-nav .vf-tabs-btn:not(.active) {
    color: #fff;
}

.mcx-applications-section .vf-tabs .vf-tabs-pane {
    padding: 0;
}

.mcx-applications-section .tab-heading-wrap {
    text-align: center;
    margin-bottom: 130rem;
}

/* 5 Reasons Interactive Section */
.reasons-grid-items {
    position: relative;
    width: 100%;
    margin-top: 320rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 1418rem;
}

.reasons-grid-items .reasons-background {
    display: flex;
    justify-content: flex-end;
}

.reasons-bg-image {
    max-width: 1418rem;
    margin: auto;
}

.reasons-icons {
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 100%;
}

.reason-icon {
    position: absolute;
    width: 275rem;
    height: 275rem;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 30rem solid transparent;
}

.reason-icon {
    background: rgba(230, 0, 0, 0.01);
    box-shadow: 0 0 35.707rem 0 #E60000;
}

.reason-icon .icon-inner {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: relative;
    background: #e60000;
    box-shadow: 0 7rem 30rem rgba(0, 0, 0, 0.10);
    z-index: 2;
}

.reason-icon.active .icon-inner {
    background-color: #fff;

    transform: scale(1);
}

.reason-icon img {
    width: 100%;
    height: 100%;
    transition: opacity 0.3s ease;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 40rem;
}

.reason-icon .icon-white {
    opacity: 1;
}

.reason-icon .icon-red {
    opacity: 0;
}

.reason-icon.active .icon-white {
    opacity: 0;
}

.reason-icon.active .icon-red {
    opacity: 1;
}

/* Icon positioning based on pentagon layout */
.reason-icon[data-reason="1"] {
    top: -4%;
    left: 50%;
    transform: translateX(-50%);
}

.reason-icon[data-reason="2"] {
    top: 55%;
    left: -4%;

}

.reason-icon[data-reason="3"] {
    top: 55%;
    right: -6%;
}


/* Reason Cards */
.reason-card {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    z-index: 2;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.34, 1, 0.64, 1);
    pointer-events: none;
    height: 91%;
    width: 91%;
    margin-left: 8rem;
}

.reason-card.active {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    pointer-events: all;
}

.reason-card .card-content {
    border-radius: 100%;
    height: 100%;
    width: 100%;
    position: relative;
    display: flex;
    /* justify-content: center; */
    gap: 50rem;
    background: rgb(0 0 0 / 28%);
    text-align: center;
    padding-top: 250rem;
    flex-direction: column;
}

.reason-card .card-close {
    position: absolute;
    width: 80rem;
    height: 80rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0rem;
    top: 10rem;
    right: 10rem;
    z-index: 10;
}


.reason-icon .vf-text-47 {
    font-size: 47rem;
    line-height: normal;
}

.reason-icon .text {
    position: absolute;
    width: 400rem;
    text-align: center;
    bottom: -180rem;
}

.reason-icon[data-reason="1"] .text {
    bottom: unset;
    top: -180rem;
}

.reason-card .card-content .vf-text-47 {
    font-size: 47rem;
}

.reason-card .card-content .text-list {
    display: flex;
    flex-direction: column;
    gap: 40rem;
    max-width: 740rem;
    margin-left: auto;
    margin-right: auto;
}

.reason-card .card-content .text-list h6 {
    margin-bottom: 10rem;
}

.reason-card .card-content .text-list p {
    font-size: 28rem;
    line-height: normal;
}

.reason-card .card-content h3 {
    max-width: 550rem;
    margin-left: auto;
    margin-right: auto;
    line-height: normal;
}

.vf-text-250 {
    font-size: 250rem;
}

.vf-accordion-item:last-of-type {
    border-bottom: none;
}