/*
 * IEC pages/voucher-management-template.css
 * Is file mein milega (page-templates/voucher-management-template.php):
 * - Hero
 * - Spacer
 * - Text block
 * - Solution architecture cards
 * - Split media and text
 * - Installation checklist
 * - Video block
 *
 * Use case accordion (key features), use cases slider aur enquiry form shared
 * hain — unki CSS sections.css mein hai. Mobile rules responsive.css mein,
 * tablet rules tablet.css mein.
 */

/* ====== Hero — voucher-management start ====== */
.iec_vms_hero {
    padding: 2.035831rem 0 2.349035rem;
    background: linear-gradient(280deg, var(--color-secondary) 24.98%, var(--color-primary) 99.41%);
    border-radius: 0 0 8rem 0;
    color: var(--color-white);
}

.iec_vms_hero_title { color: var(--color-white); padding-bottom: 0; }

.iec_vms_hero_desc {
    max-width: 16.99162rem;
    color: var(--color-white);
    font-family: var(--font-secondary);
    font-weight: var(--light);
    line-height: normal;
}

.iec_vms_hero_actions { display: flex; align-items: center; gap: 0.6rem; margin-top: 1.4rem; }

.iec_vms_hero_actions .btn {
    width: 100%;
    max-width: 7.634365rem;
    height: 1.722626rem;
    padding: 0 0.587259rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.156602rem;
    margin: 0;
    border-radius: 0.313205rem;
    font-size: 0.626409rem;
    font-weight: var(--regular);
}

.iec_vms_hero_actions .btn svg { width: auto; height: 0.587259rem; }

.iec_vms_hero_image { width: 90%; height: 100%; object-fit: cover; }

/* ====== Hero — voucher-management end ====== */

/* ====== Spacer — voucher-management ====== */
.iec_vms_spacer { height: var(--spacer-height); }

/* ====== Text block — voucher-management start ====== */
.iec_vms_text.is-center { text-align: center; }

.iec_vms_text.is-right { text-align: right; }

/* ====== Text block — voucher-management end ====== */

/* ====== Solution architecture — voucher-management start ====== */
.iec_vms_arch_grid { gap: 3.3278rem; margin-top: 1.4rem; }

.iec_vms_arch_card {
    position: relative;
    overflow: hidden;
    min-height: 11.431972rem;
    padding: 0.64rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    color: var(--color-white);
    background: linear-gradient(123.75deg, var(--color-primary) 5%, var(--color-secondary) 96.03%);
    border-radius: 1.12rem;
}

.iec_vms_arch_card_icon img { min-width: 4.788509rem; min-height: 4.369284rem; }

.iec_vms_arch_card_title {
    font-family: var(--font-secondary);
    font-weight: var(--bold);
    font-size: 0.96rem;
    line-height: 1.04rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.iec_vms_arch_card_text {
    margin-bottom: 0.8rem;
    color: var(--color-white);
    font-family: var(--font-secondary);
    font-weight: var(--light);
    font-size: 0.861313rem;
    line-height: 145.455%;
}

/* Desktop par yeh panel hover pe card ke upar aata hai; mobile par inline rehta hai. */
.iec_vms_arch_card_more {
    position: absolute;
    inset: 0;
    z-index: 1;
    padding: 0.6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--color-secondary);
    border-radius: 1.12rem;
    opacity: 0;
    visibility: hidden;
    transition: 0.4s;
}

.iec_vms_arch_card_more .iec_vms_arch_card_text { line-height: 1.6; }

.iec_vms_arch_card_link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--color-white);
    text-transform: uppercase;
    font-family: var(--font-secondary);
    font-weight: var(--semi-bold);
    font-size: 0.626409rem;
}

@media (hover: hover) {
    .iec_vms_arch_card:hover .iec_vms_arch_card_more { opacity: 1; visibility: visible; }
}

/* ====== Solution architecture — voucher-management end ====== */

/* ====== Split media and text — voucher-management start ====== */
.iec_vms_split {
    min-height: 25.995991rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.iec_vms_split_media {
    position: absolute;
    top: 0;
    right: 2.349035rem;
    width: 100%;
    max-width: 25.995991rem;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.iec_vms_split_media > * { width: 100%; height: auto; max-width: 100%; }

.iec_vms_split_shape {
    position: absolute;
    top: 0;
    z-index: -1;
    max-width: 25.995991rem;
    height: 100%;
}

.iec_vms_split_image { max-width: 25.003915rem; }

.iec_vms_split.is-reverse .iec_vms_split_media { left: 0; right: auto; max-width: 50%; }

.iec_vms_split.is-reverse .iec_vms_split_shape { margin-inline: 1.409421rem 0; }

.iec_vms_split.is-reverse .iec_vms_split_image {
    max-width: 39.085599rem;
    height: 100%;
    margin-top: 1.5rem;
    object-fit: contain;
}

/* ====== Split media and text — voucher-management end ====== */

/* ====== Installation checklist — voucher-management start ====== */
.iec_vms_installation {
    padding: 4.24rem 0;
    background: rgba(202, 209, 234, 0.6);
    border-radius: 0 8rem 0 0;
}

.iec_vms_installation .wysiwyg-content { margin-top: 0.469807rem; }

.iec_vms_list { max-width: 19.575294rem; }

.iec_vms_list li {
    align-items: start;
    color: var(--color-primary);
    font-family: var(--font-secondary);
    font-size: 0.783012rem;
}

.iec_vms_list_icon { position: relative; margin-left: -6px; color: var(--color-secondary); }

/* ====== Installation checklist — voucher-management end ====== */

/* ====== Video block — voucher-management start ====== */
.iec_vms_video { padding: 3.44rem 0; background: rgba(202, 209, 234, 0.6); border-radius: 200px 0; }

.iec-video-player {
    position: relative;
    width: 100%;
    max-width: 35.23553rem;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    background: var(--color-primary);
    border-radius: 0.469858rem;
    overflow: hidden;
}

.iec-video-thumbnail {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.4s ease;
}

.iec-video-thumbnail.hide { opacity: 0; pointer-events: none; }

.iec-video-thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.iec-video-play-btn {
    position: relative;
    z-index: 1;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.iec-video-play-btn:focus-visible { outline: 2px solid var(--color-white); outline-offset: 4px; border-radius: 50%; }

.iec-video-iframe,
.iec-video-iframe iframe { width: 100%; height: 100%; border: 0; }

@media (hover: hover) {
    .iec-video-play-btn:hover { transform: scale(1.1); opacity: 0.85; }
}

/* ====== Video block — voucher-management end ====== */