@font-face {
    font-family: "KALAMEH_BOLD";
    src: url("../fonts/KALAMEH_BOLD.TTF");
}

@font-face {
    font-family: "KALAMEH_REGULAR";
    src: url("../fonts/KALAMEH_REGULAR.TTF");
}



/* ================= DESKTOP ================= */

@media (min-width: 768px) {

    html,
    body {
        overflow: hidden;
        height: 100vh;
    }

    body {
        background-color: white !important;
    }

    /* HEADER */

    .desktop-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 28px 50px;
        height: 90px;
    }

    .desktop-logo img {
        width: 120px;
    }

    .desktop-menu {
        display: flex;
        align-items: center;
        gap: 35px;
        font-family: KALAMEH_REGULAR;
        font-size: 22px;
    }

    .desktop-menu a {
        text-decoration: none;
        color: black;
        white-space: nowrap;
    }


    .desktop-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: calc(100vh - 90px);
        padding: 0 65px 40px;
        overflow: hidden;
    }


    /* ================= RIGHT CONTENT ================= */

    .desktop-right {
        width: 40%;

        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-right: 50px;
        align-items: flex-end;
        text-align: right;

        direction: rtl;
    }


    .desktop-text-wrap {
        display: flex;
        flex-direction: row-reverse;
        gap: 20px;

        width: fit-content; /* 👈 مهم */
        margin-left: auto;  /* 👈 هل بده سمت راست */
    }
    .desktop-line {
        width: 3px;
        background: black;
        opacity: .85;
        align-self: stretch;
        height: auto;
    }

    .desktop-description {
        text-align: right;
        font-family: KALAMEH_REGULAR;
    }

    .desktop-description p {
        font-size: 26px;
        line-height: 1.5;
        margin: 0;
    }


    .desktop-btn {
        margin-top: 22px;
        align-self: flex-end; /* 👈 زیر نوشته راست */
        margin-right: 25px;
        border-radius: 999px;
        background: #ea964c;
        border: 2px solid black;
        padding: 8px 20px;
        position: relative;
        box-shadow: 5px 5px black;
        margin-left: auto; /* 👈 بره راست */
        display: block;
    }


    .desktop-btn span {
        color: white;
        font-size: 22px;
        font-family: KALAMEH_BOLD;
        text-shadow:
                0px 0px 0 black,
                1px 0px 0 black,
                0px 2px 0 black,
                2px 1px 1px black;
    }

    .desktop-social {
        display: flex;
        gap: 18px;
        margin-top: 22px;
        margin-right: 25px;
        margin-left: auto; /* 👈 بره راست */
        width: fit-content;
    }

    .desktop-social img {
        height: 25px;
        align-self: flex-end;
    }


    /* ================= LEFT IMAGE ================= */

    .desktop-left {
        width: 40%;
        position: relative;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start; /* بچسبه سمت چپ */
        padding-left: 40px;
    }

    .sky-box {
        width: 420px;
        height: 540px; /* ارتفاع کمتر */

        position: relative;
        overflow: visible;

        background: linear-gradient(
                to bottom,
                #8fbce0,
                #dceef9
        );

        border-radius: 250px 10px 10px 10px;
    }

    .cloud-bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: .95;
    }

    .desktop-girl {
        position: absolute;
        width: 600px !important; /* کوچیک‌تر */

        right: -120px; /* بره سمت راست کادر */
        top: 75px;

        z-index: 5;
    }



    .desktop-cloud-top{
        position: absolute;

        width: 120px;

        top: -10px;     /* از بالا بزنه بیرون */

        z-index: 7;

        pointer-events: none;

        animation: cloudFloat 6s ease-in-out infinite;
    }

}