/*
=========================================================
assets/css/india/destinations/taj-mahal.css
=========================================================
*/

/* =========================================================
   PAGE VARIABLES
========================================================= */

:root {

    --taj-max-width: 1240px;
    --taj-content-width: 920px;

    --taj-radius: 16px;
    --taj-radius-small: 12px;

    --taj-gap: 18px;
    --taj-section-gap: 28px;

    --taj-border:
        var(--border-color, #e3e7ee);

    --taj-card:
        var(
            --card-background,
            rgba(255, 255, 255, 0.78)
        );

    --taj-text:
        var(
            --text-color,
            #111827
        );

    --taj-muted:
        var(
            --muted-text,
            #667085
        );

    --taj-primary:
        var(
            --primary-color,
            #0b3d73
        );

    --taj-shadow:
        0 8px 28px rgba(15, 23, 42, 0.06);

    --taj-shadow-hover:
        0 14px 34px rgba(15, 23, 42, 0.10);

    --taj-transition:
        180ms ease;

}


/* =========================================================
   GLOBAL PAGE CONSTRAINTS
========================================================= */

.hero {

    width: 100%;

    box-sizing: border-box;

    overflow-x: clip;

}


.hero *,
.converter-countries-wrapper *,
.back-home-wrapper * {

    box-sizing: border-box;

}


.hero img {

    max-width: 100%;

}


/* =========================================================
   HERO IMAGE
========================================================= */

.destination-hero-image {

    position: relative;

    width: 100%;

    margin: 0;

    overflow: hidden;

    background: #eef2f6;

}


.destination-hero-image img {

    display: block;

    width: 100%;

    height: auto;

    aspect-ratio: 1920 / 800;

    object-fit: cover;

    object-position: center center;

}


/*
 * Do NOT use a fixed 800px height here.
 * The image remains proportional on smaller screens.
 */


/* =========================================================
   MAIN CONTENT CONTAINER
========================================================= */

.hero > .info-block {

    width: min(
        calc(100% - 32px),
        var(--taj-max-width)
    );

    margin: 0 auto;

    padding:
        34px 0
        48px;

    background: transparent;

    border: 0;

    box-shadow: none;

}


/* =========================================================
   HERO / TITLE
========================================================= */

.country-title {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    margin: 0;

    text-align: center;

}


.taj-mahal-title-icon {

    width: 62px;

    height: 62px;

    object-fit: contain;

    flex: 0 0 auto;

}


.title-main {

    display: inline-block;

    margin: 0;

    color: var(--taj-text);

    font-size:
        clamp(
            2rem,
            4vw,
            3.35rem
        );

    line-height: 1;

    font-weight: 800;

    letter-spacing: -0.035em;

}

.tz-small {

    display: block;

    margin-top: 9px;

    color: var(--taj-muted);

    font-size:
        clamp(
            0.86rem,
            1.4vw,
            1rem
        );

    line-height: 1.45;

    font-weight: 600;

}


/* =========================================================
   UTC ROW
========================================================= */

.utc-row {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    margin-top: 8px;

}


.utc-row .clock-time {

    min-height: 24px;

    font-size: 1.05rem;

    font-variant-numeric: tabular-nums;

}


.utc-row .clock-tz {

    margin-top: 1px;

    color: var(--taj-muted);

    font-size: 0.82rem;

}


/* =========================================================
   INTRODUCTION
========================================================= */

.above-clock {

    width: min(
        100%,
        var(--taj-content-width)
    );

    margin:
        24px auto
        0;

    color: var(--taj-text);

    font-size:
        clamp(
            0.94rem,
            1.5vw,
            1.04rem
        );

    line-height: 1.75;

    text-align: center;

}


/* =========================================================
   LOCAL CLOCK
========================================================= */

.country-big-clock {

    width: 100%;

    margin:
        30px 0
        38px;

    padding:
        30px 24px;

    text-align: center;

    border:
        1px solid var(--taj-border);

    border-radius:
        var(--taj-radius);

    background:
        var(--taj-card);

    box-shadow:
        var(--taj-shadow);

}


.country-time-value {

    color: var(--taj-text);

    font-size:
        clamp(
            3.2rem,
            8vw,
            5.6rem
        );

    line-height: 0.98;

    font-weight: 800;

    letter-spacing: -0.055em;

    font-variant-numeric:
        tabular-nums;

}


.country-time-label {

    margin-top: 12px;

    color: var(--taj-muted);

    font-size:
        clamp(
            0.82rem,
            1.5vw,
            0.96rem
        );

    line-height: 1.5;

    font-weight: 600;

}


/* =========================================================
   SECTION TITLES
========================================================= */

.section-title {

    margin:
        var(--taj-section-gap)
        0
        18px;

    color: var(--taj-primary);

    font-size:
        clamp(
            1.65rem,
            3vw,
            2.25rem
        );

    line-height: 1.2;

    font-weight: 800;

    letter-spacing: -0.025em;

}


.section-title:first-child {

    margin-top: 0;

}


/* =========================================================
   META INFORMATION
========================================================= */

.meta-row {

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 12px;

    width: 100%;

    margin-top: 20px;

}


.meta {

    min-width: 0;

    padding:
        16px 17px;

    border:
        1px solid var(--taj-border);

    border-radius:
        var(--taj-radius-small);

    background:
        var(--taj-card);

    color: var(--taj-text);

    font-size: 0.9rem;

    line-height: 1.5;

}


.meta strong {

    font-weight: 750;

}


/* =========================================================
   COMMON CONTENT CARDS
========================================================= */

.seo-text,
.destination-section,
.visitor-section,
.ticket-section,
.facts-wrapper,
.faq-section,
.destinations-card {

    width: 100%;

    margin-top:
        var(--taj-section-gap);

    padding:
        26px;

    border:
        1px solid var(--taj-border);

    border-radius:
        var(--taj-radius);

    background:
        var(--taj-card);

    box-shadow:
        var(--taj-shadow);

}


/* =========================================================
   SEO CONTENT
========================================================= */

.seo-text {

    max-width: 100%;

    color: var(--taj-text);

    line-height: 1.8;

}


.seo-text h2 {

    margin:
        0
        0
        16px;

    color: var(--taj-primary);

    font-size:
        clamp(
            1.5rem,
            2.5vw,
            2rem
        );

    line-height: 1.25;

}


.seo-text h3 {

    margin:
        28px 0
        9px;

    color: var(--taj-primary);

    font-size: 1.18rem;

}


.seo-text p {

    max-width: 900px;

    margin:
        0
        0
        16px;

}


.seo-text p:last-child {

    margin-bottom: 0;

}


/* =========================================================
   WHY VISIT
========================================================= */

.destination-grid {

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        var(--taj-gap);

}


.destination-feature {

    min-width: 0;

    padding: 22px;

    border:
        1px solid var(--taj-border);

    border-radius:
        var(--taj-radius-small);

    background:
        rgba(
            127,
            127,
            127,
            0.035
        );

    transition:
        transform var(--taj-transition),
        box-shadow var(--taj-transition),
        border-color var(--taj-transition);

}


.destination-feature:hover {

    transform:
        translateY(-2px);

    box-shadow:
        var(--taj-shadow-hover);

}


.destination-feature h3 {

    margin:
        0
        0
        9px;

    color: var(--taj-text);

    font-size: 1.08rem;

    line-height: 1.35;

}


.destination-feature p {

    margin: 0;

    color: var(--taj-muted);

    line-height: 1.7;

}


/* =========================================================
   VISITOR INFORMATION
========================================================= */

.facts-grid {

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 14px;

}


.fact-card {

    min-width: 0;

    padding: 20px;

    border:
        1px solid var(--taj-border);

    border-radius:
        var(--taj-radius-small);

    background:
        rgba(
            127,
            127,
            127,
            0.035
        );

}


.fact-label {

    display: block;

    margin-bottom: 7px;

    color: var(--taj-muted);

    font-size: 0.78rem;

    line-height: 1.3;

    font-weight: 750;

    text-transform: uppercase;

    letter-spacing: 0.045em;

}


.fact-card strong {

    display: block;

    color: var(--taj-text);

    font-size: 0.98rem;

    line-height: 1.5;

}


/* =========================================================
   TICKETS
========================================================= */

.ticket-grid {

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:
        var(--taj-gap);

}


.ticket-card {

    min-width: 0;

    padding: 22px;

    border:
        1px solid var(--taj-border);

    border-radius:
        var(--taj-radius-small);

    background:
        rgba(
            127,
            127,
            127,
            0.035
        );

}


.ticket-card h3 {

    margin:
        0
        0
        10px;

    color: var(--taj-text);

    font-size: 1.05rem;

}


.ticket-card p {

    margin: 0;

    color: var(--taj-muted);

    line-height: 1.7;

}


.ticket-note {

    margin-top: 18px;

}


/* =========================================================
   BEST TIME / SEASONS
========================================================= */

.season-grid {

    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 14px;

}


.season-card {

    min-width: 0;

    padding: 20px;

    border:
        1px solid var(--taj-border);

    border-radius:
        var(--taj-radius-small);

    background:
        rgba(
            127,
            127,
            127,
            0.035
        );

}


.season-card h3 {

    margin:
        0
        0
        9px;

    color: var(--taj-text);

    font-size: 1rem;

}


.season-card p {

    margin: 0;

    color: var(--taj-muted);

    font-size: 0.91rem;

    line-height: 1.65;

}


/* =========================================================
   NEARBY DESTINATIONS
========================================================= */

.destinations-card > .info-text {

    max-width: 850px;

}


.destinations-grid {

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 14px;

}


.destination-card {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

    min-width: 0;

    min-height: 82px;

    padding:
        17px 19px;

    color: inherit;

    text-decoration: none;

    border:
        1px solid var(--taj-border);

    border-radius:
        var(--taj-radius-small);

    background:
        rgba(
            127,
            127,
            127,
            0.035
        );

    transition:
        transform var(--taj-transition),
        box-shadow var(--taj-transition),
        border-color var(--taj-transition);

}


.destination-card:hover {

    transform:
        translateY(-2px);

    box-shadow:
        var(--taj-shadow-hover);

    border-color:
        var(--primary-color, #0b3d73);

}


.destination-content {

    min-width: 0;

}


.destination-name {

    display: block;

    overflow-wrap: anywhere;

    color: var(--taj-text);

    font-size: 0.98rem;

    line-height: 1.4;

    font-weight: 750;

}


.destination-tag {

    display: block;

    margin-top: 4px;

    color: var(--taj-muted);

    font-size: 0.8rem;

    line-height: 1.45;

}


.destination-arrow {

    flex:
        0 0 auto;

    color: var(--taj-primary);

    font-size: 1.25rem;

    font-weight: 700;

    transition:
        transform var(--taj-transition);

}


.destination-card:hover
.destination-arrow {

    transform:
        translateX(4px);

}


/* =========================================================
   TRAVEL TIPS ACCORDION
========================================================= */

.info-section {

    overflow: hidden;

    border:
        1px solid var(--taj-border);

    border-radius:
        var(--taj-radius-small);

    background:
        rgba(
            127,
            127,
            127,
            0.035
        );

}


.info-toggle {

    width: 100%;

    min-height: 54px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 14px;

    padding:
        15px 18px;

    border: 0;

    background: transparent;

    color: var(--taj-text);

    cursor: pointer;

    text-align: left;

    font: inherit;

    font-weight: 750;

}


.info-toggle:hover {

    background:
        rgba(
            127,
            127,
            127,
            0.06
        );

}


.info-content {

    padding:
        0
        20px
        20px;

    color: var(--taj-text);

    line-height: 1.75;

}


.info-content ul {

    margin: 0;

    padding-left: 21px;

}


.info-content li + li {

    margin-top: 8px;

}


/* =========================================================
   RELATED TAGS / OFFICIAL LINKS
========================================================= */

.related-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 9px;

    margin-top: 18px;

}


.related-tags a {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 38px;

    padding:
        7px 13px;

    color: inherit;

    text-decoration: none;

    border:
        1px solid var(--taj-border);

    border-radius: 999px;

    font-size: 0.83rem;

    font-weight: 700;

    transition:
        background-color var(--taj-transition),
        transform var(--taj-transition);

}


.related-tags a:hover {

    transform:
        translateY(-1px);

    background:
        rgba(
            127,
            127,
            127,
            0.08
        );

}


/* =========================================================
   FAQ
========================================================= */

.faq-wrapper {

    width: 100%;

}


.faq-item {

    overflow: hidden;

    border:
        1px solid var(--taj-border);

    border-radius:
        var(--taj-radius-small);

    background:
        rgba(
            127,
            127,
            127,
            0.035
        );

}


.faq-item + .faq-item {

    margin-top: 10px;

}


.faq-toggle {

    width: 100%;

    min-height: 56px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 14px;

    padding:
        16px 18px;

    border: 0;

    background: transparent;

    color: var(--taj-text);

    cursor: pointer;

    text-align: left;

    font: inherit;

    font-weight: 750;

}


.faq-toggle:hover {

    background:
        rgba(
            127,
            127,
            127,
            0.06
        );

}


.faq-content {

    padding:
        0
        20px
        20px;

    color: var(--taj-muted);

    line-height: 1.75;

}


.faq-content p {

    margin: 0;

}


/* =========================================================
   CONVERTER OUTER AREA
========================================================= */

.converter-countries-wrapper {

    width: min(
        calc(100% - 32px),
        var(--taj-max-width)
    );

    margin:
        0 auto;

    padding-bottom:
        18px;

}


.converter {

    width: 100%;

    margin: 0;

    padding: 26px;

    border:
        1px solid var(--taj-border);

    border-radius:
        var(--taj-radius);

    background:
        var(--taj-card);

    box-shadow:
        var(--taj-shadow);

}


.converter .section-title {

    margin-top: 0;

}


/* =========================================================
   CONVERTER INPUTS
========================================================= */

.converter .row {

    display: grid;

    grid-template-columns:
        1fr
        minmax(220px, 0.9fr)
        1fr;

    gap: 12px;

}


.converter select,
.converter input {

    width: 100%;

    min-width: 0;

    min-height: 46px;

    padding:
        9px 12px;

    border:
        1px solid var(--taj-border);

    border-radius:
        10px;

    background:
        var(
            --input-background,
            transparent
        );

    color:
        var(
            --text-color,
            inherit
        );

    font: inherit;

}


.converter select:focus,
.converter input:focus {

    outline:
        2px solid
        rgba(
            11,
            61,
            115,
            0.22
        );

    outline-offset: 1px;

}


/* =========================================================
   CONVERTER BUTTONS
========================================================= */

.convert-actions {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 14px;

}


.convert-actions .cta {

    min-height: 44px;

}


.swap-btn {

    min-width: 48px;

    padding-left: 13px;

    padding-right: 13px;

}


.swap-icon {

    display: inline-block;

    font-size: 1.15rem;

}


/* =========================================================
   CONVERTER RESULT
========================================================= */

#convert-result-box {

    margin-top: 18px;

    padding: 18px;

    border:
        1px solid var(--taj-border);

    border-radius:
        var(--taj-radius-small);

    background:
        rgba(
            127,
            127,
            127,
            0.035
        );

}


#convert-result-box h3 {

    margin:
        0
        0
        10px;

}


.converter-result strong {

    display: block;

    font-size: 1.05rem;

    line-height: 1.5;

}


.converter-result-source {

    margin-top: 6px;

    color: var(--taj-muted);

    font-size: 0.85rem;

    line-height: 1.5;

}


.divider {

    margin:
        22px 0;

    border: 0;

    border-top:
        1px solid var(--taj-border);

}


.hidden {

    display: none !important;

}


/* =========================================================
   BACK LINKS
========================================================= */

.back-home-wrapper {

    width: min(
        calc(100% - 32px),
        var(--taj-max-width)
    );

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: center;

    gap: 10px;

    margin: 0 auto;

    padding:
        10px 0
        42px;

}


.back-home-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 42px;

    padding:
        8px 16px;

    color: inherit;

    text-decoration: none;

    border:
        1px solid var(--taj-border);

    border-radius: 999px;

    font-weight: 700;

    transition:
        background-color var(--taj-transition),
        transform var(--taj-transition);

}


.back-home-button:hover {

    transform:
        translateY(-1px);

    background:
        rgba(
            127,
            127,
            127,
            0.08
        );

}


/* =========================================================
   TABLET
   701px – 1024px
========================================================= */

@media (max-width: 1024px) {

    .hero > .info-block {

        width:
            min(
                calc(100% - 28px),
                920px
            );

        padding-top:
            28px;

    }


    .meta-row {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

    }


    .ticket-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

    }


    .season-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

    }


    .converter .row {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

    }


    .converter .row input {

        grid-column:
            1 / -1;

        order: -1;

    }

}


/* =========================================================
   MOBILE
   <= 700px
========================================================= */

@media (max-width: 700px) {

    :root {

        --taj-section-gap: 20px;

    }


    .destination-hero-image {

        width: 100%;

    }


    .destination-hero-image img {

        /*
         * Preserve complete 1920×800 composition.
         * No aggressive crop on mobile.
         */

        height: auto;

        aspect-ratio:
            1920 / 800;

        object-fit: contain;

        object-position:
            center center;

    }


    .hero > .info-block {

        width:
            calc(100% - 20px);

        padding:
            24px 0
            34px;

    }


    .title-main {

        font-size:
            clamp(
                1.75rem,
                8vw,
                2.35rem
            );

        letter-spacing:
            -0.03em;

    }


    .tz-small {

        margin-top: 7px;

        font-size: 0.84rem;

    }


    .utc-row {

        margin-top: 7px;

    }


    .above-clock {

        margin-top: 18px;

        font-size: 0.92rem;

        line-height: 1.65;

    }


    .country-big-clock {

        margin:
            24px 0
            30px;

        padding:
            23px 14px;

    }


    .country-time-value {

        font-size:
            clamp(
                2.8rem,
                15vw,
                4.1rem
            );

        letter-spacing:
            -0.045em;

    }


    .country-time-label {

        margin-top: 9px;

        font-size: 0.78rem;

    }


    .section-title {

        margin-bottom: 14px;

        font-size:
            clamp(
                1.45rem,
                7vw,
                1.85rem
            );

    }


    .meta-row {

        grid-template-columns: 1fr;

        gap: 9px;

        margin-top: 16px;

    }


    .meta {

        padding:
            14px;

        font-size: 0.87rem;

    }


    .seo-text,
    .destination-section,
    .visitor-section,
    .ticket-section,
    .facts-wrapper,
    .faq-section,
    .destinations-card {

        margin-top: 20px;

        padding:
            20px 16px;

        border-radius:
            14px;

    }


    .seo-text {

        line-height: 1.72;

    }


    .seo-text h2 {

        font-size: 1.45rem;

    }


    .seo-text h3 {

        margin-top: 22px;

        font-size: 1.08rem;

    }


    .destination-grid,
    .facts-grid,
    .ticket-grid,
    .season-grid,
    .destinations-grid {

        grid-template-columns: 1fr;

        gap: 10px;

    }


    .destination-feature,
    .fact-card,
    .ticket-card,
    .season-card {

        padding:
            17px;

    }


    .destination-card {

        min-height: 74px;

        padding:
            14px;

        gap: 10px;

    }


    .destination-name {

        font-size: 0.93rem;

    }


    .destination-tag {

        font-size: 0.76rem;

    }


    .destination-arrow {

        font-size: 1.1rem;

    }


    .info-toggle,
    .faq-toggle {

        min-height: 52px;

        padding:
            14px;

        font-size: 0.92rem;

    }


    .info-content,
    .faq-content {

        padding:
            0
            15px
            16px;

        font-size: 0.9rem;

        line-height: 1.68;

    }


    .info-content ul {

        padding-left: 19px;

    }


    .converter-countries-wrapper {

        width:
            calc(100% - 20px);

    }


    .converter {

        padding:
            20px 16px;

        border-radius:
            14px;

    }


    .converter .row {

        grid-template-columns: 1fr;

        gap: 10px;

    }


    .converter .row input {

        grid-column: auto;

        order: initial;

    }


    .convert-actions {

        display: grid;

        grid-template-columns:
            1fr
            auto;

    }


    .convert-actions .cta {

        width: 100%;

    }


    #convert-result-box {

        padding: 15px;

    }


    .related-tags {

        gap: 7px;

    }


    .related-tags a {

        min-height: 36px;

        padding:
            6px 10px;

        font-size: 0.77rem;

    }


    .back-home-wrapper {

        width:
            calc(100% - 20px);

        padding-bottom:
            30px;

    }


    .back-home-button {

        flex:
            1 1 auto;

        min-width:
            135px;

        font-size: 0.85rem;

    }

}


/* =========================================================
   SMALL MOBILE
   <= 420px
========================================================= */

@media (max-width: 420px) {

    .hero > .info-block {

        width:
            calc(100% - 16px);

    }


    .destination-hero-image img {

        /*
         * Keep the complete banner visible.
         */

        object-fit: contain;

    }


    .title-main {

        font-size:
            1.65rem;

    }


    .tz-small {

        font-size:
            0.78rem;

    }


    .country-time-value {

        font-size:
            2.55rem;

    }


    .country-time-label {

        font-size:
            0.72rem;

    }


    .above-clock {

        font-size:
            0.86rem;

    }


    .seo-text,
    .destination-section,
    .visitor-section,
    .ticket-section,
    .facts-wrapper,
    .faq-section,
    .destinations-card {

        padding:
            18px 14px;

    }


    .section-title {

        font-size:
            1.35rem;

    }


    .destination-feature,
    .fact-card,
    .ticket-card,
    .season-card {

        padding:
            15px;

    }


    .destination-card {

        min-height:
            70px;

        padding:
            13px;

    }


    .destination-tag {

        margin-top:
            3px;

        font-size:
            0.72rem;

    }


    .info-toggle,
    .faq-toggle {

        font-size:
            0.86rem;

    }


    .converter {

        padding:
            18px 13px;

    }


    .convert-actions {

        grid-template-columns:
            1fr
            48px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .destination-feature,
    .destination-card,
    .destination-arrow,
    .related-tags a,
    .back-home-button {

        transition: none;

    }

}


/* =========================================================
   DARK THEME
========================================================= */

[data-theme="dark"]
.destination-hero-image {

    background:
        #111827;

}


[data-theme="dark"]
.destination-feature,
[data-theme="dark"]
.fact-card,
[data-theme="dark"]
.ticket-card,
[data-theme="dark"]
.season-card,
[data-theme="dark"]
.destination-card,
[data-theme="dark"]
.info-section,
[data-theme="dark"]
.faq-item,
[data-theme="dark"]
#convert-result-box {

    background:
        rgba(
            255,
            255,
            255,
            0.025
        );

    box-shadow:
        none;

}


[data-theme="dark"]
.country-big-clock,
[data-theme="dark"]
.seo-text,
[data-theme="dark"]
.destination-section,
[data-theme="dark"]
.visitor-section,
[data-theme="dark"]
.ticket-section,
[data-theme="dark"]
.facts-wrapper,
[data-theme="dark"]
.faq-section,
[data-theme="dark"]
.destinations-card,
[data-theme="dark"]
.converter {

    box-shadow:
        0 8px 28px
        rgba(
            0,
            0,
            0,
            0.18
        );

}