@font-face {
    font-family: 'ray';
    src: url('../fonts/ray/Ray.ttf'); /* IE9 Compat Modes */
}

*:not(i) {
    line-height: 1.5;
    font-family: "ray", serif !important;
    transition: 0.5s ease all;
}


:root {
    --second-color: #000;
}

body {
    margin: 0;
    font-family: sans-serif;
}

.container-lg {
    min-height: 100vh;
}

.layout-info-title-logo {
    width: 70px;
    height: 70px;
    aspect-ratio: 1;
}

.layout-info-list li:first-letter {
    padding-right: 12px;
}

.layout-info-list li:before {
    content: "";
    width: 6px;
    height: 6px;
    background: var(--second-color);
    border-radius: 50%;
    display: inline-block;
    margin: 0 4px;
}

.layout-download-arrow img {
    transform: rotateY(180deg);
}

/* ======= قاب گوشی دسکتاپ ======= */
.layout-page {
    aspect-ratio: 390 / 844!important;  /* نسبت دقیق 390/844 */
    width: min(calc(100vh * 390 / 844), calc(100vw - 40px), 390px);  /* عرض بر اساس ارتفاع viewport یا عرض viewport */
    margin: 0 auto;                   /* وسط صفحه */
    outline: 14px solid #303030;
    border-radius: 25px;
    position: relative;
    overflow: hidden;
    background: #fff;
}

.layout-page iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* دسکتاپ: همه المان‌ها نمایش داده شوند */
@media (min-width: 800px) {
    .layout-info,
    .layout-download {
        display: block;
    }
}

/* لپتاپ کوچک: جلوگیری از روی هم افتادن المان‌ها */
@media (min-width: 800px) and (max-width: 991px) {
    .layout-info-wrapper {
        padding-right: 15px !important;
    }

    .layout-download-wrapper {
        padding-left: 15px !important;
    }

    .layout-page {
        width: min(calc(100vh * 390 / 844), calc((100vw - 60px) * 0.4), 390px);
    }
}

/* موبایل: فقط iframe نمایش داده شود - زیر 800px */
@media (max-width: 799px) {
    .layout-info-wrapper,
    .layout-download-wrapper,
    .layout-info,
    .layout-download {
        display: none !important;  /* قالب را مخفی می‌کنیم */
    }

    .container-lg {
        padding: 0 !important;
    }

    .row {
        margin: 0 !important;
    }

    .col-12.col-lg-4 {
        padding: 0 !important;
    }

    .layout-page {
        aspect-ratio: 390 / 844;  /* حفظ نسبت 390/844 */
        width: 100%;
        height: 100dvh!important;
        max-width: none;
        max-height: none;
        margin: 0;
        outline: 0;
        border-radius: 0;
    }

    .layout-page iframe {
        width: 100%;
        height: 100%;
    }
}
.container-lg{
    height: 100dvh;
}