header {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1440px;
    height: 80px;
    display: flex;
    align-items: center;
    padding-left: 40px;
    background: #f9f9f9;
    border-bottom: 1px solid #ececec;
    z-index: 1000;
}

     .content{
                    margin-left: 20px;
        }
        .logo-main {
            font-size: 24px;
            letter-spacing: .2em;
            text-transform: uppercase;
            font-weight: 300;
        }

        .logo-sub {
            font-size: 8px;
            letter-spacing: .35em;
            color: #777;
        }

        /* LAYOUT */

        .layout {
            display: flex;
            padding-top: 80px;
            min-height: 100vh;
                max-width: 1440px;
    margin: 0 auto;
        }

        
            /* ---------------- MENU BUTTON ---------------- */
        .menu-handle {
            position: fixed;
            top: 19px;
            right: 30px;
            width: 42px;
            height: 42px;
            background: rgba(255, 255, 255, 0.9);
            border: 1px solid #e5e5e5;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 2000;
            transition: all .35s ease;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }

        .menu-handle:hover {
            background: #fff;
            transform: scale(1.06);
            box-shadow: 0 8px 25px rgba(0, 0, 0, .08);
        }

        .lines {
            width: 16px;
            height: 14px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .lines div {
            width: 100%;
            height: 1.5px;
            background: #222;
            border-radius: 10px;
            transition: .35s ease;
        }

        .menu-handle.active .lines div:nth-child(1) {
            transform: translateY(6px) rotate(45deg);
        }

        .menu-handle.active .lines div:nth-child(2) {
            opacity: 0;
        }

        .menu-handle.active .lines div:nth-child(3) {
            transform: translateY(-6px) rotate(-45deg);
        }


              /* ---------------- SIDEBAR DESKTOP ---------------- */
        .sidebar {
            width: 0;
            overflow: hidden;
            transition: width .45s ease;
            border-right: 1px solid #ececec;
            background: #f9f9f9;
            flex-shrink: 0;
        }

        .sidebar.open {
            width: 200px;
        }

        .nav {
            padding: 60px 30px;
            display: flex;
            flex-direction: column;
            gap: 25px;
        }

        .nav a {
            text-decoration: none;
            font-size: 12px;
            letter-spacing: .25em;
            text-transform: uppercase;
            color: #444;
            transition: .3s;
        }

        .nav a:hover {
            color: #000;
            letter-spacing: .15em;
            transition: .5s;
        }


        @keyframes fadeUp{
from{
    opacity:0;
    transform: translateY(10px);
}
to{
    opacity:1;
    transform: translateY(0);
}
}

   
        /* SECTION TITLES */

        .section-title {
            padding-top: 20px;
            font-size: 13px;
            letter-spacing: .35em;
            text-transform: uppercase;
            margin-bottom: 40px;
    
            color: #555;
        }

        /* DIRECTOR */
 
        .director {
            display: flex;
            gap: 50px;
            align-items: center;
               
            margin-bottom: 100px;
        }

        .director img {
            width: 260px;
            height: 320px;
            object-fit: cover;
            filter: grayscale(100%);
            transition: .5s;
        }

        .director img:hover {
            filter: grayscale(0%);
        }

        .director-info h2 {
            font-weight: 400;
            letter-spacing: .15em;
            margin-bottom: 10px;
            
        }

        .director-info p {
            font-size: 14px;
            line-height: 1.6;
            color: #666;
            max-width: 500px;
        }

        /* TEAM GRID */

        .team-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 40px;
            margin-bottom: 100px;
        }

        .member {
            text-align: left;
        }

        .member img {
            width: 100%;
            height: 260px;
            object-fit: cover;
            filter: grayscale(100%);
            transition: .5s;
        }

        .member img:hover {
            filter: grayscale(0%);
        }

        .member-name {
            margin-top: 15px;
            font-size: 12px;
            letter-spacing: .2em;
            text-transform: uppercase;
        }

        .member-role {
            font-size: 11px;
            color: #777;
            margin-top: 5px;
        }

/* MOBILE */
 

        @media(max-width:600px) {

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

            .content {
                padding: 40px 20px;
            }

        }
        /* MOBILE */
@media(max-width:900px){

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

            .director {
                flex-direction: column;
                align-items: flex-start;
            }

.menu-handle{
display:flex;
cursor:pointer;
}

.layout{
display:block;
}

.sidebar{
position:fixed;
right:0;
top:80px;
width:150px;
height:calc(100vh - 80px);

transform:translateX(100%); /* مخفی خارج از صفحه */

backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);

border-left:1px solid #ececec;
border-right:none;

transition:transform .45s ease;

z-index:3000;
}

.sidebar.open{
transform:translateX(0);
}

 


 
.nav a{
opacity:0;
}

.sidebar.open .nav a{
animation:fadeUp .6s ease forwards;
 

}

}