/* ---------- Grid Home ---------- */

.grid-home {
    display: grid;
    gap: 15px;
    grid-auto-flow: row;
}

@media (min-width: 0px) {
    .grid-home {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto auto auto;
        grid-template-areas:
            "Ar3"
            "Ar1"
            "Ar2"
            "Ar4";
    }
}

@media (min-width: 960px) {
    .grid-home {
        grid-template-columns: repeat(9, 1fr);
        grid-template-rows: repeat(4, 140px);
        grid-template-areas:
            "Ar1 Ar1 Ar1 Ar2 Ar2 Ar2 Ar3 Ar3 Ar3"
            "Ar1 Ar1 Ar1 Ar2 Ar2 Ar2 Ar3 Ar3 Ar3"
            "Ar4 Ar4 Ar4 Ar4 Ar4 Ar4 Ar3 Ar3 Ar3"
            "Ar4 Ar4 Ar4 Ar4 Ar4 Ar4 Ar3 Ar3 Ar3";
    }
}

@media (min-width: 1200px) {
    .grid-home {
        grid-template-columns: repeat(8, 1fr);
        grid-template-rows: repeat(4, 170px);
        grid-template-areas:
            "Ar1 Ar1 Ar2 Ar2 Ar2 Ar3 Ar3 Ar3"
            "Ar1 Ar1 Ar2 Ar2 Ar2 Ar3 Ar3 Ar3"
            "Ar4 Ar4 Ar4 Ar4 Ar4 Ar3 Ar3 Ar3"
            "Ar4 Ar4 Ar4 Ar4 Ar4 Ar3 Ar3 Ar3";
    }
}

/* ----- Grid Area Boxes ----- */

.grid-home .area {
    background-color: #EAEAEA;
    border-radius: 24px;
    overflow-y: hidden;
}

.grid-home .Ar1 {
    grid-area: Ar1;
    min-height: 240px;
    background-image: url(../img/bg/bg-1.svg);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 100% 100%;
}

.grid-home .Ar2 {
    grid-area: Ar2;
    min-height: 240px;
    background-image: url(../img/bg/bg-2.svg);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 65%;
}

.grid-home .Ar3 {
    grid-area: Ar3;
    background-image: url(../img/bg/bg-3.svg);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 56%;
    min-height: 100%;
    max-height: 100%;
}

.grid-home .Ar4 {
    grid-area: Ar4;
    background-image: url(../img/bg/bg-4.svg);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: contain;
    min-height: 100%;
    max-height: 100%;
}

@media (min-width: 0px) {
    .grid-home .area {
        padding: 30px;
    }
}

@media (min-width: 960px) {
    .grid-home .area {
        padding: 20px;
    }
}

@media (min-width: 1200px) {
    .grid-home .area {
        padding: 30px;
    }
}

/* ----- General Card Elements ----- */

.grid-home .Ar3 .icon-3d {
    width: 400px;
}

.grid-home .Ar4 .icon-3d {
    animation: floatUpDown 2s ease-in-out infinite;
}

@keyframes floatUpDown {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
        /* میره بالا */
    }

    100% {
        transform: translateY(0);
        /* برمی‌گرده پایین */
    }
}


@media (min-width: 0px) {

    .grid-home .g-card .icon-3d {
        width: 230px;
    }

    .grid-home .Ar4 .icon-3d {
        width: 400px;
    }
}

@media (min-width: 960px) {
    .grid-home .g-card .icon-3d {
        width: 140px;
    }

    .grid-home .Ar4 .icon-3d {
        width: 350px;
    }
}

@media (min-width: 1200px) {
    .grid-home .g-card .icon-3d {
        width: 180px;
    }
}


/* ----- Layout Components ----- */

.grid-home .gi-info {
    width: 100%;
    height: 100%;
    display: flex;
    gap: 24px;
}

.grid-home .gi-info .gi-text {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    gap: 8px;
    text-align: right;
}

/* ----- Button Visibility ----- */

.grid-home .btn-i.click-dekstop {
    display: inline-block;
}

.grid-home .btn-ii.click-dekstop {
    display: none;
}

@media (min-width: 0px) {
    .grid-home .gi-info {
        flex-direction: row-reverse;
        justify-content: space-between;
    }

    .grid-home .gi-info .gi-text {
        width: 200px;
    }

    .grid-home .btn-i.click-dekstop {
        display: none;
    }

    .grid-home .btn-ii.click-dekstop {
        display: flex;
    }
}

@media (min-width: 960px) {
    .grid-home .gi-info {
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-end;
    }

    .grid-home .gi-info .gi-text {
        width: 350px;
    }

    .grid-home .btn-i.click-dekstop {
        display: inline-block;
    }

    .grid-home .btn-ii.click-dekstop {
        display: none;
    }
}

/* ----- Special Card Layouts ----- */

.grid-home .Ar3 .g-card-shop {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.grid-home .Ar4 .g-card-stock {
    display: flex;
    justify-content: space-between;
    height: 100%;
}

@media (min-width: 0px) {
    .grid-home .Ar4 .g-card-stock {
        flex-direction: column;
        gap: 4rem;
    }

    .grid-home .Ar3 .g-card-shop {
        gap: 4rem;
    }
}

@media (min-width: 960px) {
    .grid-home .Ar4 .g-card-stock {
        flex-direction: row-reverse;
        align-items: center;
        gap: 0;
    }

    .grid-home .Ar3 .g-card-shop {
        gap: 0;
    }
}