:root {
            --cream: #f4efe5;
            --paper: #faf7f0;
            --olive: #354237;
            --brown: #604a38;
            --gold: #b69a61;
            --dark: #29251f;
            --muted: #777168;
        }
		
	@font-face {
    font-family: IRANSans;
    src: url('fonts/IRANSansWeb/IRANSansWeb.eot');
    src: url('fonts/IRANSansWeb/IRANSansWeb.eot') format('embedded-opentype'), url('fonts/IRANSansWeb/IRANSansWeb(FaNum).woff') format('woff'), url('fonts/IRANSansWeb/IRANSansWeb.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: vazir;
    src: url('fonts/vazir/Vazir.eot');
    src: url('fonts/vazir/Vazir.eot') format('embedded-opentype'), url('fonts/vazir/Vazir-Meduim-FD.woff') format('woff'), url('fonts/vazir/Vazir.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: vazir-bold;
    src: url('fonts/vazir/Vazir-Bold.eot');
    src: url('fonts/vazir/Vazir-Blod.eot') format('embedded-opentype'), url('fonts/vazir/Vazir-Bold-FD.woff') format('woff'), url('fonts/vazir/Vazir-Bold.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: dana;
    src: url('fonts/dana/dana-fanum-medium.eot');
    src: url('fonts/dana/dana-fanum-medium.eot') format('embedded-opentype'), url('fonts/dana/dana-fanum-medium.woff') format('woff'), url('fonts/dana/dana-fanum-medium.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
			font-family: "IRANSans", sans-serif;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: "IRANSans", sans-serif !important;
			
            background: var(--paper);
            color: var(--dark);
            line-height: 1.9;
        }
		h1, h2, h3, h4, h5, h6 {
    font-family: "vazir-bold", sans-serif;
    font-weight: 700;
}

        a {
            text-decoration: none;
            color: inherit;
        }

        img {
            display: block;
            width: 100%;
        }

        .container {
            width: min(1180px, 90%);
            margin: auto;
        }
		p{text-align:justify}

        /* =========================
           HEADER
        ========================= */

        header {
            position: absolute;
            top: 0;
            width: 100%;
            z-index: 100;
            color: white;
        }

        .navbar {
			margin-top: 30px;
            height: 90px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid rgba(255,255,255,.3);
        }

        .logo {
            text-align: center;
            font-size: 30px;
            /* letter-spacing: 3px; */
        }

        .logo span {
            display: block;
            font-size: 8px;
            /* letter-spacing: 4px; */
            margin-top: -8px;
        }

        .menu {
            display: flex;
            gap: 35px;
            font-size: 14px;
        }

        .menu a {
            transition: .3s;
        }

        .menu a:hover {
            color: #dfc993;
        }


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

        .hero {
            min-height: 100vh;
            position: relative;

            display: flex;
            align-items: center;

            background:
                linear-gradient(
                    90deg,
                    rgba(20,18,14,.62),
                    rgba(20,18,14,.2)
                ),
                url("../images/hero.jpeg")
                center / cover no-repeat;
        }

        .hero-content {
            color: white;
            max-width: 650px;
            padding-top: 70px;
			text-align:center;
        }

        .hero-small {
            color: #dfc993;
            font-size: 13px;
            /* letter-spacing: 3px; */
            margin-bottom: 20px;
        }

        .hero h1 {
            font-size: clamp(45px, 7vw, 80px);
            line-height: 1.25;
            font-weight: 400;
            margin-bottom: 20px;
        }

        .hero p {
            font-size: 17px;
            color: #f0ece3;
            margin-bottom: 35px;
        }

        .hero-button {
            display: inline-block;
            padding: 11px 30px;
            border: 1px solid rgba(255,255,255,.8);
            transition: .3s;
        }

        .hero-button:hover {
            background: white;
            color: var(--dark);
        }

        .scroll {
            position: absolute;
            bottom: 25px;
            left: 50%;
            transform: translateX(-50%);
            color: white;
            font-size: 10px;
            /* letter-spacing: 3px; */
        }


        /* =========================
           INTRO
        ========================= */

        .intro {
            padding: 80px 0 90px;
            text-align: center;
        }

        .eyebrow {
            color: var(--gold);
            font-size: 12px;
            /* letter-spacing: 2px; */
            margin-bottom: 12px;
        }

        .intro h2 {
            color: var(--brown);
            font-size: 38px;
            font-weight: 400;
            margin-bottom: 15px;
        }

        .intro p {
            max-width: 680px;
            margin: auto;
            color: var(--muted);
            font-size: 15px;
        }


        /* =========================
           CATEGORIES
        ========================= */

        .categories {
            padding-bottom: 110px;
        }

        .category-grid {
            display: grid;
            grid-template-columns: repeat(3,1fr);
            gap: 18px;
        }

        .category {
            height: 430px;
            position: relative;
            overflow: hidden;
        }

        .category img {
            height: 100%;
            object-fit: cover;
            transition: .7s;
        }

        .category:hover img {
            transform: scale(1.06);
        }

        .category::after {
            content: "";
            position: absolute;
            inset: 0;

            background:
                linear-gradient(
                    to top,
                    rgba(25,22,18,.75),
                    transparent 60%
                );
        }

        .category-text {
            position: absolute;
            right: 30px;
            bottom: 28px;
            z-index: 2;
            color: white;
        }

        .category-text h3 {
            font-size: 23px;
            font-weight: 400;
        }

        .category-text span {
            color: #e4d3ad;
            font-size: 12px;
        }


        /* =========================
           STORY
        ========================= */

        .story {
            background: var(--cream);
            padding: 80px 0;
        }

        .story-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 75px;
            align-items: center;
        }

        .story-image {
            height: 590px;
            overflow: hidden;
        }

        .story-image img {
            height: 100%;
            object-fit: cover;
        }

        .story-text h2 {
            color: var(--brown);
            font-size: 40px;
            font-weight: 400;
            line-height: 1.6;
            margin-bottom: 22px;
        }

        .story-text p {
            color: var(--muted);
            font-size: 15px;
            margin-bottom: 16px;
        }

        .story-link {
            display: inline-block;
            color: var(--brown);
            border-bottom: 1px solid var(--gold);
            margin-top: 15px;
            padding-bottom: 5px;
            font-size: 14px;
        }


        /* =========================
           PRODUCTS
        ========================= */

        .products {
            padding: 80px 0;
        }

        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: end;
            margin-bottom: 40px;
        }

        .section-header h2 {
            color: var(--brown);
            font-size: 38px;
            font-weight: 400;
        }

        .all-products {
            color: var(--brown);
            border-bottom: 1px solid var(--gold);
            font-size: 13px;
        }

        .products-grid {
            display: grid;
            grid-template-columns: repeat(4,1fr);
            gap: 20px;
        }

        .product-image {
            height: 370px;
            overflow: hidden;
            background: #e9e2d5;
        }

        .product-image img {
            height: 100%;
            object-fit: cover;
            transition: .6s;
        }

        .product:hover img {
            transform: scale(1.04);
        }

        .product-info {
            padding: 14px 2px;
        }

        .product-info h3 {
            color: var(--brown);
            font-size: 15px;
            font-weight: 500;
        }

        .product-info p {
            color: var(--muted);
            font-size: 12px;
        }


        /* =========================
           QUOTE
        ========================= */

        .quote {
            background: #4a3010;
            color: white;
            text-align: center;
            padding: 80px 20px;
        }

        .quote-mark {
            color: #c6ad78;
            font-family: Georgia;
            font-size: 65px;
            line-height: 1;
        }

        .quote p {
            max-width: 800px;
            margin: 10px auto 20px;
            font-size: 27px;
            font-weight: 300;
        }

        .quote span {
            color: #d8c9aa;
            font-size: 11px;
            /* letter-spacing: 2px; */
        }


        /* =========================
           CORPORATE
        ========================= */

        .corporate {
            padding: 80px 0;
        }

        .corporate-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 65px;
            align-items: center;
        }

        .corporate-image {
            height: 440px;
            overflow: hidden;
        }

        .corporate-image img {
            height: 100%;
            object-fit: cover;
        }

        .corporate-text h2 {
            color: var(--brown);
            font-size: 38px;
            font-weight: 400;
            line-height: 1.6;
            margin-bottom: 18px;
        }

        .corporate-text p {
            color: var(--muted);
            font-size: 15px;
            margin-bottom: 25px;
        }

        .corporate-button {
            display: inline-block;
            background: var(--brown);
            color: white;
            padding: 11px 27px;
            font-size: 13px;
            transition: .3s;
        }

        .corporate-button:hover {
            background: var(--olive);
        }


        /* =========================
           FOOTER
        ========================= */

        footer {
            background: #4a3010;
            color: white;
            padding: 70px 0 25px;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 1.5fr 1fr 1fr 1fr;
            gap: 40px;
        }

        footer h3 {
            font-size: 17px;
            font-weight: 400;
            margin-bottom: 15px;
        }

        footer p,
        footer a {
            color: #bdbdb6;
            font-size: 12px;
        }

        footer a {
            display: block;
            margin: 6px 0;
        }

        .footer-logo {
            font-size: 30px;
            /* letter-spacing: 3px; */
        }

        .copyright {
            border-top: 1px solid rgba(255,255,255,.12);
            margin-top: 50px;
            padding-top: 20px;

            display: flex;
            justify-content: space-between;

            color: #fff;
            font-size: 10px;
        }


        /* =========================
           MOBILE
        ========================= */

        @media(max-width:850px) {

            .menu {
                display: none;
            }

            .category-grid {
                grid-template-columns: 1fr;
            }

            .category {
                height: 350px;
            }

            .story-grid,
            .corporate-grid {
                grid-template-columns: 1fr;
                gap: 35px;
            }

            .story-image {
                height: 450px;
            }

            .products-grid {
                grid-template-columns: repeat(2,1fr);
            }

            .product-image {
                height: 300px;
            }

            .footer-grid {
                grid-template-columns: 1fr 1fr;
            }
        }


        @media(max-width:520px) {

            .navbar {
                height: 75px;
            }

            .hero h1 {
                font-size: 42px;
            }

            .hero p {
                font-size: 14px;
            }

            .intro,
            .products,
            .story,
            .corporate {
                padding: 75px 0;
            }

            .intro h2,
            .section-header h2,
            .story-text h2,
            .corporate-text h2 {
                font-size: 30px;
            }

            .section-header {
                display: block;
            }

            .all-products {
                display: inline-block;
                margin-top: 10px;
            }

            .product-image {
                height: 230px;
            }

            .quote p {
                font-size: 20px;
            }

            .footer-grid {
                grid-template-columns: 1fr;
            }

            .copyright {
                display: block;
            }
        }


/* =========================================
   YEKIN COLLECTIONS
========================================= */

.yekin-collections {
    background: #f7f3eb;
    padding: 80px 0;
}

.collections-container {
    width: min(1180px, 90%);
    margin: auto;
}


/* عنوان */

.collections-heading {
    text-align: center;
    max-width: 650px;
    margin: 0 auto 55px;
}

.collections-eyebrow {
    display: block;
    color: #b69a61;
    font-size: 12px;
    margin-bottom: 12px;
}

.collections-heading h2 {
    color: #604a38;
    font-size: 38px;
    font-weight: 400;
    margin-bottom: 12px;
}

.collections-heading p {
    color: #777168;
    font-size: 14px;
    font-weight: 300;
}


/* گرید */

.collections-grid {
    display: grid;

    grid-template-columns:
        repeat(12, 1fr);

    grid-auto-rows: 95px;

    gap: 18px;
}


/* کارت عمومی */

.collection {
    position: relative;
    display: block;
    overflow: hidden;

    color: white;

    background: #ddd;

    isolation: isolate;
}


/* تصویر */

.collection img {
    position: absolute;

    width: 100%;
    height: 100%;

    object-fit: cover;

    inset: 0;

    transition:
        transform .8s cubic-bezier(.2,.7,.2,1);
}


/* لایه تاریک */

.collection-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(25,22,18,.78),
            rgba(25,22,18,.05) 70%
        );

    z-index: 1;

    transition: .4s;
}


/* هاور */

.collection:hover img {
    transform: scale(1.06);
}

.collection:hover .collection-overlay {
    background:
        linear-gradient(
            to top,
            rgba(25,22,18,.86),
            rgba(25,22,18,.12) 75%
        );
}


/* متن */

.collection-content {
    position: absolute;

    right: 30px;
    bottom: 28px;

    z-index: 2;
}

.collection-content > span {
    display: block;

    color: #ddcda8;

    font-size: 10px;

    letter-spacing: 1px;

    margin-bottom: 5px;
}

.collection-content h3 {
    font-size: 24px;
    font-weight: 400;

    line-height: 1.5;
}

.collection-content p {
    color: #eee9df;

    font-size: 12px;

    margin-top: 2px;
}

.collection-arrow {
    margin-top: 13px;

    color: #dfceaa;

    font-size: 11px;

    opacity: .9;

    transition: .3s;
}

.collection:hover .collection-arrow {
    transform: translateX(-6px);
}


/* =========================================
   اندازه کارت‌ها
========================================= */


/* شاهنامه */

.collection-large {
    grid-column: span 7;
    grid-row: span 5;
}


/* رخسار */

.collection-medium {
    grid-column: span 5;
    grid-row: span 5;
}


/* سه‌تایی */

.collection-small {
    grid-column: span 4;
    grid-row: span 3;
}

.collection-mini {
    grid-column: span 4;
    grid-row: span 2;
}

.collection-mini-1 {
    grid-column: span 3;
    grid-row: span 5;
}
.collection-small-1 {
    grid-column: span 3;
    grid-row: span 3;
}



/* =========================================
   MOBILE
========================================= */

@media (max-width: 850px) {

    .yekin-collections {
        padding: 80px 0;
    }

    .collections-heading {
        margin-bottom: 35px;
    }

    .collections-heading h2 {
        font-size: 30px;
    }

    .collections-grid {
        grid-template-columns: repeat(2, 1fr);

        grid-auto-rows: 180px;

        gap: 12px;
    }

    .collection-large,
    .collection-medium {
        grid-column: span 2;
        grid-row: span 2;
    }

    .collection-small {
        grid-column: span 1;
        grid-row: span 1;
    }

    .collection-content {
        right: 18px;
        bottom: 18px;
    }

    .collection-content h3 {
        font-size: 19px;
    }

}


/* =========================================
   MOBILE کوچک
========================================= */

@media (max-width: 480px) {

    .collections-grid {
        grid-template-columns: 1fr;

        grid-auto-rows: 260px;
    }

    .collection-large,
    .collection-medium,
	.collection-mini,
	.collection-mini-1,
	.collection-small-1,
    .collection-small {
        grid-column: span 1;
        grid-row: span 1;
    }

}