/* =========================================
                    RESET
        ========================================= */

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }


        html {
            scroll-behavior: smooth;
        }


        body {
            font-family: "Vazirmatn", sans-serif;
            background: #ffffff;
            color: #333;
            direction: rtl;
            overflow-x: hidden;
            line-height: 1.8;
        }


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


        button {
            font-family: "Vazirmatn", sans-serif;
        }


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


        /* =========================================
                    NAVBAR
        ========================================= */

        .navbar {

            position: fixed;

            top: 0;
            right: 0;
            left: 0;

            height: 72px;

            background: #ffffff;

            display: flex;

            align-items: center;

            justify-content: space-between;

            padding: 0 28px;

            box-shadow:
                0 8px 25px rgba(0, 0, 0, 0.07);

            z-index: 999;

        }


        /* =========================================
                    LOGO
        ========================================= */
		.logo {
    		width: 55px;
            
    		height: 55px;
            
            box-shadow:
                0 5px 15px rgba(0, 0, 0, 0.05);

    		align-items: center;
            
    		justify-content: center;

    		text-decoration: none;

            border-radius: 50%;

            background: #7fa5db;

            display: flex;

            transition: 0.35s;
		}

		.logo img {
    		width: 100%;
    		height: 100%;

    		object-fit: contain;

    		display: block;
		}


        .logo:hover {

            transform: scale(1.1);

        }
         .logo:active {

            transform: scale(0.9);

        }


        /* =========================================
                    MENU BUTTON
        ========================================= */

        .menu-btn {

            position: fixed;

            left: 20px;
            top: 9px;

            width: 53px;
            height: 53px;

            border: none;

            background: #7fa5db;

            display: flex;

            flex-direction: column;

            justify-content: center;

            align-items: center;

            gap: 6px;

            cursor: pointer;

            z-index: 1300;

            border-radius: 12px;

            box-shadow:
                0 5px 15px rgba(0, 0, 0, 0.1);

            transition: 0.3s;

        }


        .menu-btn:hover {

            transform: scale(1.1);

        }


        .menu-btn:active {

            transform: scale(0.9);

        }


        .menu-btn span {

            width: 28px;
            height: 3px;

            background: #333;

            border-radius: 20px;

            transition: 0.3s;

        }



        /* =========================================
                    SIDEBAR
        ========================================= */

        .sidebar {

            position: fixed;

            top: 0;

            left: -320px;

            width: 300px;

            height: 100vh;

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

            backdrop-filter: blur(14px);

            box-shadow:
                8px 0 40px rgba(0, 0, 0, 0.15);

            transition:
                left 0.55s cubic-bezier(.22, 1, .36, 1);

            z-index: 1200;

            padding-top: 80px;

            overflow: hidden;

        }


        .sidebar.active {

            left: 0;

        }


        .sidebar h2 {

            text-align: center;

            color: #0b5ed7;

            font-size: 30px;

            margin-bottom: 45px;

        }


        .sidebar a {

            display: block;

            align-items: center;

            padding: 18px 35px;

            margin: 8px 18px;

            border-radius: 15px;

            font-size: 21px;

            font-weight: 600;

            color: #333;

			text-decoration:none;
            
            transition: 0.35s;

            opacity: 0;

            transform: translateX(-40px);
            

        }


        .sidebar.active a {

            opacity: 1;

            transform: translateX(0);

        }


        .sidebar.active a:nth-of-type(1) {

            transition-delay: 0.10s;

        }


        .sidebar.active a:nth-of-type(2) {

            transition-delay: 0.20s;

        }


        .sidebar.active a:nth-of-type(3) {

            transition-delay: 0.30s;

        }


        .sidebar a:hover {

            background:
                linear-gradient(
                    135deg,
                    #0b5ed7,
                    #4dabf7
                );

            color: white;

            transform:
                translateX(10px)
                scale(1.03);

            box-shadow:
                0 10px 25px rgba(13, 110, 253, 0.30);

        }


        /* CLOSEBTN*/

        .closebtn {

            position: absolute;

            top: 18px;
            right: 20px;

            width: 42px;
            height: 42px;

            display: flex;

            justify-content: center;
            align-items: center;

            border-radius: 50%;

            font-size: 30px;

            cursor: pointer;

            transition: 0.35s;

        }


        .closebtn:hover {

            background: #729ddb;

            color: white;

            transform: rotate(180deg);

        }


        /* =========================================
                    OVERLAY
        ========================================= */

        .overlay {

            position: fixed;

            inset: 0;

            background: rgba(0, 0, 0, 0.45);

            opacity: 0;

            visibility: hidden;

            transition: 0.35s;

            z-index: 1000;

        }


        .overlay.active {

            opacity: 1;

            visibility: visible;

        }


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

        .page-header {

            margin-top: 72px;

            padding: 75px 20px 45px;

            text-align: center;

            background: #f7f7f7;

        }


        .page-header h1 {

            font-size: 46px;

            font-weight: 800;

            color: #172a3a;

            margin-bottom: 12px;

        }


        .page-header p {

            font-size: 23px;

            color: #444;

        }


        /* =========================================
                    FILTER BUTTONS
        ========================================= */

        .filters {

            width: min(1100px, 92%);

            margin: 35px auto 10px;

            display: flex;

            justify-content: center;

            align-items: center;

            gap: 12px;

            flex-wrap: wrap;

        }


        .filter-btn {

            border: 1px solid #ddd;

            background: #ffffff;

            color: #333;

            padding: 11px 25px;

            border-radius: 999px;

            font-size: 16px;

            cursor: pointer;

            transition: 0.3s;

        }


        .filter-btn:hover {

            background: #f1f1f1;

            transform: translateY(-2px);

        }


        .filter-btn.active {

            background:  #7fa5db;

            color: #ffffff;

            border-color:  #7fa5db;

            box-shadow:
                0 8px 20px rgba(137, 177, 232, 0.5);

}

/* =========================================
                    PROJECT SECTION
        ========================================= */

        .projects-section {

            width: min(1100px, 92%);

            margin: auto;

            padding: 45px 0 90px;

        }
        
 
        /* ================= PROJECT GRID ================= */

        .project-grid {
            display: grid;

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

            gap: 25px;

            width: 100%;
        }


        /* ================= PROJECT CARD ================= */

        .project-card {
            display: flex;

            flex-direction: column;

            min-height: 350px;

            background: #ffffff;

            border-radius: 20px;

            overflow: hidden;

            text-decoration: none;

            color: #222;

            border: 1px solid #eeeeee;

            box-shadow:
                0 8px 25px rgba(0, 0, 0, 0.07);

            transition:
                transform 0.3s ease,
                box-shadow 0.3s ease;
        }


        .project-card:hover {
            transform: translateY(-8px);

            box-shadow:
                0 18px 40px rgba(0, 0, 0, 0.13);
        }


        /* ================= PROJECT IMAGE ================= */

        .project-image {
            width: 100%;
            height: 220px;

            overflow: hidden;
            position: relative;
            background: #e9eef5;
        }


        .project-image img {
            width: 100%;
            height: 100%;

            display: block;

            object-fit: cover;

            transition:
                transform 0.4s ease;
        }


        .project-card:hover
        .project-image img {
            transform: scale(1.06);
        }


/* =========================
   FIELD STICKER
========================= */

.field-sticker {
    position: absolute;
    bottom: 12px;
    right: 12px;

    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: white;
    border-radius: 16px;

    font-size: 30px;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.18);

    z-index: 5;

    transform: rotate(-6deg);

    transition: all 0.25s ease;
}

/* افکت هاور */
.project-card:hover .field-sticker {
    transform: rotate(0deg) scale(1.1);
}


/* =========================
   رشته‌ها
========================= */

.field-sticker.chemistry {
    border: 3px solid #5b8def;
}

.field-sticker.psychology {
    border: 3px solid #9b72cf;
}

.field-sticker.biology {
    border: 3px solid #55b878;
}

.field-sticker.industrial-design {
    border: 3px solid #f0a04b;
}

.field-sticker.architecture {
    border: 3px solid #d96b5f;
}

.field-sticker.cognitive-science {
    border: 3px solid #4aa8c4;
}

.field-sticker.robotics {
    border: 3px solid #6574cd;
}

.field-sticker.story-writing {
    border: 3px solid #e58b9b;
}

        /* ================= PROJECT INFO ================= */

        .project-info {
            flex: 1;

            display: flex;

            flex-direction: column;

            padding: 20px;
        }


        /* ================= PROJECT NAME ================= */

        .project-info h2 {
            margin: 0;

            font-size: 22px;

            font-weight: 700;

            color: #1d3557;
        }


        /* ================= TEACHER ================= */

        .teacher-tag {
            margin-top: auto;

            align-self: flex-start;

            padding: 7px 14px;

            border-radius: 10px;

            background: #eef6ff;

            color: #2878c8;

            font-size: 13px;

            font-weight: 600;

            line-height: 1.8;
        }

       
        
        
        

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

        .footer {

            background: #2c3e50;

            color: white;

            padding: 35px 20px;

            text-align: center;

        }


        .footer-content {

            max-width: 1000px;

            margin: auto;

        }


        .footer h3 {

            font-size: 30px;

            margin-bottom: 15px;

        }


        .footer p {

            color: #ddd;

            margin: 10px 0;

        }


        .footer-links {

            margin: 25px 0;

        }


        .footer-links a {

            color: white;

            margin: 0 15px;

            font-size: 17px;

            transition: 0.3s;

        }


        .footer-links a:hover {

            color: #4dabf7;

        }


        .copyright {

            margin-top: 25px;

            font-size: 14px;

            color: #bbb;

        }


        /* =========================================
                    HIDDEN CARD
        ========================================= */

        .project-card.hidden {

            display: none;

        }


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

        @media (max-width: 768px) {

            .page-header {

                padding:
                    60px 20px 35px;

            }


            .page-header h1 {

                font-size: 34px;

            }


            .page-header p {

                font-size: 16px;

            }


            .project-grid {
            
                grid-template-columns : repeat(2, 1fr);
                gap: 18px;
                
            }

			.project-image {height: 210px;

            }


            .project-info {

                padding: 18px;
                display: flex;
    			flex-direction: column;

            }


            .project-info h2 {

                font-size: 18px;

            }


            .project-info p {

                font-size: 14px;

            }


            .sidebar {

                width: 280px;

            }

        }


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

        @media (max-width: 520px) {

            .navbar {

                padding: 0 18px;

            }


            .page-header {

                margin-top: 72px;

                padding-top: 50px;

            }


            .page-header h1 {

                font-size: 29px;

            }


            .filters {

                margin-top: 25px;

            }


            .filter-btn {

                padding:
                    9px 18px;

                font-size: 14px;

            }


            .projects-section {

                width: 90%;

                padding-top: 30px;

            }


            .project-grid {

                grid-template-columns: 1fr;

                gap: 22px;

            }


            .project-image {

                height: 240px;

            }


            .footer-links a {

                display: inline-block;

                margin: 5px 8px;

            }

        }