/*
 * IEC pages/single-solution.css
 * Is file mein milega (single-solution.php):
 * - Hero
 * - Overview copy
 * - Overview image gallery
 * - Gallery lightbox
 * - Use cases
 * - Features
 *
 * Anchor nav, application pills, markets slider, specifications, product
 * materials aur FAQ accordion shared hain — unki CSS sections.css mein hai.
 * Mobile rules responsive.css mein, tablet rules tablet.css mein.
 */

/* ====== Hero — single-solution start ====== */
.iec_single_solution_hero {
    background-image: var(--bg_desktop);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 16.689426rem;
    padding-top: 3.424017rem;
    padding-bottom: 4.459847rem;
    display: flex;
    align-items: center;
}

.iec_single_solution_hero .container,
.iec_single_solution_hero .iec_single_solution_tagline { position: relative; }

.iec_single_solution_tagline {
    position: absolute;
    top: 50%;
    right: 0;
    width: 2.583939rem;
    height: 10.727261rem;
    background-color: var(--color-white);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.783012rem 0 0 0.783012rem;
    transform: translateY(-50%);
}

.iec_single_solution_tagline span {
    font-family: var(--font-secondary);
    font-weight: var(--bold);
    font-size: 1.409421rem;
    line-height: normal;
    text-transform: uppercase;
    position: relative;
    transform: rotate(180deg);
    user-select: none;
    writing-mode: vertical-lr;
}

.iec_single_solution_hero_content { max-width: 15.425215rem; }

.iec_single_solution_hero_content .iec_ps_pills { margin-bottom: 0.900464rem; }

.iec_single_solution_name {
    font-family: var(--font-secondary);
    font-size: 1.566024rem;
    line-height: 125%;
    letter-spacing: 0.037585rem;
    padding-bottom: 0;
    margin-bottom: 0.469807rem;
    color: var(--color-white);
}

.iec_single_solution_sub_head {
    font-family: var(--font-secondary);
    font-weight: var(--light);
    font-size: 0.983012rem;
    line-height: normal;
    text-transform: uppercase;
    margin-bottom: 0;
    color: #eceef3;
}

.iec_single_solution_slide_buttons {
    display: flex;
    list-style: none;
    align-items: center;
    gap: 0.333518rem;
    margin-top: 1.448572rem;
    padding: 0;
}

.iec_single_solution_slide_buttons li { flex: 0 0 auto; min-width: 8.504159rem; }

.iec_single_solution_slide_buttons li a {
    font-family: var(--font-secondary);
    font-weight: var(--bold);
    max-width: 100%;
    min-height: 1.75097rem;
    padding: 0 0.750416rem;
    font-size: 0.604711rem;
    text-transform: uppercase;
    margin-bottom: 0;
}

.iec_outline_button_with_icon {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.208449rem;
    border: 1px solid var(--color-secondary);
    color: var(--color-white);
    gap: 0.416898rem;
}

.iec_outline_button_with_icon svg { width: 0.583657rem; height: auto; }

@media (hover: hover) {
    .iec_outline_button_with_icon:hover { background-color: var(--color-secondary); }
}

/* ====== Hero — single-solution end ====== */

/* ====== Overview copy — single-solution start ====== */
.iec_single_solution_overview_content {
    padding: 3.71039rem 0 2.876594rem;
    margin-top: -1.417452rem;
    background-color: var(--color-bg);
}

.iec_single_solution_overview_content .wysiwyg-content p { margin-bottom: 0.6rem; }

/* ====== Overview copy — single-solution end ====== */

/* ====== Overview image gallery — single-solution start ====== */
.iec_solution_gallery { padding: 3.918838rem 0 5.544739rem; }

/* Desktop par swiper grid ban jaata hai; mobile par JS Swiper start karti hai. */
.iec_solution_gallery_swiper .swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.083934rem;
    transform: none;
}

.iec_solution_gallery_swiper .swiper-slide { width: auto; height: auto; }

.iec_solution_gallery_swiper .iec_swiper_arrow_warpper { display: none; }

.iec_solution_gallery_card {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
}

.iec_solution_gallery_card_image {
    position: relative;
    display: block;
    background-color: #f0f0f0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    z-index: 1;
}

.iec_solution_gallery_card_image img {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    object-fit: contain;
    object-position: center center;
    z-index: -1;
}

.iec_solution_gallery_card_icon {
    width: 0.917175rem;
    height: 0.917175rem;
    display: block;
    margin: 0.458587rem 0.375208rem 0 auto;
    color: var(--color-secondary);
}

.iec_solution_gallery_card_icon svg { width: 100%; height: auto; }

.iec_solution_gallery_card_content { display: block; margin-top: 0.500277rem; }

.iec_solution_gallery_card_title {
    display: block;
    font-family: var(--font-secondary);
    font-weight: var(--semi-bold);
    font-size: 0.667036rem;
    line-height: normal;
    text-transform: uppercase;
    color: var(--color-primary);
}

.iec_solution_gallery_card_text {
    display: block;
    font-family: var(--font-secondary);
    font-weight: var(--regular);
    font-size: 0.583657rem;
    line-height: normal;
    color: var(--color-primary);
}

/* ====== Overview image gallery — single-solution end ====== */

/* ====== Gallery lightbox — single-solution start ====== */
.iec_lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.iec_lightbox.is-open { display: flex; }

.iec_lightbox_box {
    position: relative;
    width: 90%;
    max-width: 30.734699rem;
    height: 18.196167rem;
    background: #eceef3;
    border-radius: 0.333518rem;
}

.iec_lightbox_box img {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    object-fit: contain;
    object-position: center center;
}

.iec_lightbox_close {
    position: absolute;
    top: 0.667036rem;
    right: 0.667036rem;
    width: 1.709281rem;
    height: 1.709281rem;
    padding: 0;
    border: none;
    background: none;
    color: var(--color-secondary);
    cursor: pointer;
    z-index: 2;
}

.iec_lightbox_close svg { width: 100%; height: auto; }

/* ====== Gallery lightbox — single-solution end ====== */

/* ====== Use cases — single-solution start ====== */
.iec_single_solution_use_cases {
    padding: 2.459696rem 0 4.794324rem;
    background-color: var(--color-secondary);
    z-index: 1;
}

/* Neeche ki safed patti taake agla section iss band mein ghula hua lage. */
.iec_single_solution_use_cases::before {
    content: "";
    width: 100%;
    height: 12.048343rem;
    background-color: var(--color-white);
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
}

.iec_single_solution_use_cases .iec-section-heading { color: var(--color-white); }

.iec_solution_use_cases_swiper .swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.667591rem;
    margin-top: 0.833795rem;
    transform: none;
}

.iec_solution_use_cases_swiper .swiper-slide { width: auto; height: auto; }

.iec_solution_use_cases_swiper .iec_swiper_arrow_warpper { display: none; }

.iec_single_solution_use_cases_box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    text-align: center;
    padding: 1.667591rem 1.584211rem;
    background-color: var(--color-primary);
    border-radius: 0.333518rem;
}

.iec_single_solution_use_cases_box_icon {
    width: 2.668145rem;
    height: 2.668145rem;
    margin-bottom: 0.833795rem;
    color: var(--color-secondary);
}

.iec_single_solution_use_cases_box_icon img,
.iec_single_solution_use_cases_box_icon svg { width: 100%; height: auto; }

.iec_single_solution_use_cases_box h3 {
    font-family: var(--font-secondary);
    font-weight: var(--bold);
    font-size: 1.000554rem;
    line-height: normal;
    margin-bottom: 0.333518rem;
    text-transform: uppercase;
    color: var(--color-white);
}

.iec_single_solution_use_cases_box .wysiwyg-content,
.iec_single_solution_use_cases_box .wysiwyg-content p {
    font-family: var(--font-secondary);
    font-weight: var(--light);
    font-size: 0.704711rem;
    line-height: normal;
    color: var(--color-white);
    margin-bottom: 0;
}

/* ====== Use cases — single-solution end ====== */

/* ====== Features — single-solution start ====== */
.iec_solution_features_section { padding: 1.33112rem 0 0; }

.iec_solution_features_wrapper {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.532824rem 1.000554rem;
    border: 0.117452rem dashed var(--color-secondary);
    padding: 1.526873rem 2.074981rem;
}

.iec_solution_feature_item { display: flex; align-items: center; gap: 0.830118rem; }

.iec_solution_feature_icon {
    min-width: 4.698071rem;
    height: 4.698071rem;
    text-align: center;
    color: var(--color-secondary);
}

.iec_solution_feature_icon img,
.iec_solution_feature_icon svg { width: 100%; height: auto; max-width: 4.698071rem; }

.iec_solution_feature_title {
    font-family: var(--font-secondary);
    font-weight: var(--bold);
    font-size: 0.72088rem;
    line-height: 0.865032rem;
    padding-bottom: 0.391506rem;
    color: var(--color-primary);
}

.iec_solution_feature_content .wysiwyg-content,
.iec_solution_feature_content .wysiwyg-content p {
    font-family: var(--font-secondary);
    font-weight: var(--regular);
    font-size: 0.72088rem;
    line-height: 0.865032rem;
    color: var(--color-primary);
    margin-bottom: 0;
}

/* ====== Features — single-solution end ====== */