/* =========================================
   Global Reset
========================================= */


*,
*::before,
*::after{

    box-sizing:border-box;

}


html{

    overflow-x:hidden;

}


body{

    margin:0;

    overflow-x:hidden;

}


/* =========================================
   Navbar
========================================= */


.navbar {

    direction:rtl;

    height:var(--header-height);

    padding-inline:clamp(20px,5vw,70px);

    position:fixed;

    top:0;

    left:0;

    width:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    background:var(--background);

    z-index:var(--z-navbar);

    box-shadow:var(--shadow-sm);

}



/* Logo */


.logo{

    order:2;

}


.logo img{

    width:180px;

}



/* =========================================
   Navigation
========================================= */


.nav-menu{

    order:1;

    display:flex;

    flex-direction:row;

    direction:rtl;

    list-style:none;

    gap:35px;

    padding:0;

    margin:0;

}



.nav-menu li{

    position:relative;

}


.dropdown{

    position:relative;

}



/* Links */


.nav-menu a{

    text-decoration:none;

    color:var(--text);

    font-family:var(--font-body);

    font-size:16px;

    font-weight:500;

    padding:30px 0;

    display:block;

    transition:var(--transition);

    text-align:right;

}



.nav-menu a:hover{

    color:var(--primary);

}



/* =========================================
   Mega Menu Base
========================================= */


.mega-menu{

    position:absolute;

    top:100%;

    right:0;

    width:min(1050px,85vw);

    background:var(--background);

    border-radius:18px;

    padding:35px;

    display:flex;

    flex-direction:row-reverse;

    gap:35px;

    opacity:0;

    visibility:hidden;

    transition:var(--transition);

    box-shadow:var(--shadow-md);

}



.dropdown:hover .mega-menu{

    opacity:1;

    visibility:visible;

}


/* Simple text+image dropdown (e.g. فناوری) */

.menu-text{

    width:60%;

    text-align:right;

}

.menu-text h3{

    font-family:var(--font-heading);

    font-size:24px;

    font-weight:var(--heading-weight);

    color:var(--text);

    margin:0 0 15px;

}

.menu-text p{

    font-family:var(--font-body);

    font-weight:var(--body-weight);

    color:var(--text-light);

    line-height:1.9;

    font-size:15px;

    margin-bottom:25px;

}



/* =========================================
   Shared: Intro / Links / Image columns
   (used by Research menu as-is)
========================================= */


.menu-intro{

    width:32%;

    text-align:right;

}



.menu-intro h3{

    font-family:var(--font-heading);

    font-size:24px;

    font-weight:var(--heading-weight);

    color:var(--text);

    margin:0 0 15px;

}



.menu-intro p{

    font-family:var(--font-body);

    font-weight:var(--body-weight);

    color:var(--text-light);

    line-height:1.9;

    font-size:15px;

    margin-bottom:25px;

}



.menu-links{

    width:40%;

    display:flex;

    flex-direction:column;

    gap:12px;

}



.menu-links a{

    padding:14px 15px!important;

    border-radius:12px;

    background:var(--surface);

    transition:var(--transition);

    display:flex!important;

    flex-direction:column;

}



.menu-links a:hover{

    background:var(--surface-alt);

    transform:translateX(-5px);

}



.menu-links strong{

    font-family:var(--font-heading);

    color:var(--text);

    font-size:var(--font-size-h3);

    font-weight:var(--font-weight-h3);

    margin-bottom:5px;

}



.menu-links span{

    font-family:var(--font-body);

    font-weight:var(--body-weight);

    color:var(--text-muted);

    font-size:13px;

    line-height:1.7;

}



.menu-image{

    width:28%;

}



.menu-image img{

    width:100%;

    height:250px;

    object-fit:cover;

    border-radius:15px;

}






/* =========================================
   Products Mega Menu
   (header row  ->  3-col product grid  ->  footer row)
========================================= */


.products-menu{
    flex-direction:column;
    width:min(1000px,90vw);
    padding:20px 24px;
    max-height:calc(100vh - 100px); /* فاصله از بالا/پایین صفحه رو با عدد مناسب تنظیم کنید */
    overflow-y:auto;

    scrollbar-width:thin;
    scrollbar-color:var(--border) transparent;
}
.products-menu::-webkit-scrollbar{
    width:6px;
}

.products-menu::-webkit-scrollbar-thumb{
    background:var(--border);
    border-radius:10px;
}


.products-menu .menu-intro{

    width:100%;

    display:flex;

    flex-direction:row;

    align-items:center;

    justify-content:space-between;

    gap:30px;

    text-align:right;

    padding-bottom:22px;

    margin-bottom:24px;

    border-bottom:1px solid var(--border);

}


.products-menu .menu-label{

    display:block;

    color:var(--primary);

    font-family:var(--font-body);

    font-size:13px;

    font-weight:var(--heading-weight);

    margin-bottom:6px;

}


.products-menu .menu-intro h3{

    font-size:20px;

    margin:0 0 6px;

}


.products-menu .menu-intro p{

    font-size:14px;

    line-height:1.8;

    margin:0;

    max-width:380px;

}


.products-menu .menu-links{

    width:auto;

    flex-direction:row;

    align-items:center;

    gap:10px;

    flex-shrink:0;

}


.products-menu .menu-links a{

    padding:0!important;

    background:transparent;

}


.products-menu .menu-links a:hover{

    transform:none;

    background:transparent;

}


.products-menu .menu-links .btn{

    margin-top:0;

    padding:12px 22px!important;

}


.products-menu .menu-links .text-link{

    color:var(--text);

    font-family:var(--font-body);

    font-size:14px;

    font-weight:var(--heading-weight);

    padding:12px 6px!important;

    text-decoration:none;

}


.products-menu .menu-links .text-link:hover{

    color:var(--primary);

}


/* Product cards grid */

.products-navbar-grid{

    display:flex;

    flex-direction:row;

    gap:14px;

    width:100%;

}


.product-card{

    flex:1;

    display:flex;

    flex-direction:column;

    background:var(--surface);

    border-radius:16px;

    padding:12px;

    text-decoration:none;

    transition:var(--transition);

}


.product-card:hover{

    background:var(--surface-alt);

    transform:translateY(-6px);

    box-shadow:var(--shadow-md);

}


.product-card img{

    width:100%;

    height:150px;

    object-fit:cover;

    border-radius:12px;

    margin-bottom:14px;

}


.product-card h4{

    font-family:var(--font-heading);

    font-size:var(--font-size-h3);

    font-weight:var(--font-weight-h3);

    color:var(--text);

    margin:0 0 6px;

}


.product-desc{

    font-family:var(--font-body);

    font-weight:var(--body-weight);

    color:var(--text-light);

    margin:0 0 14px;

    font-size:13px;

    line-height:1.7;

}


/* checkmark benefit list */

.product-tags{

    display:flex;

    flex-direction:column;

    gap:7px;

    margin-bottom:14px;

}


.product-tags span{

    display:flex;

    align-items:center;

    gap:6px;

    font-family:var(--font-body);

    font-size:13px;

    font-weight:500;

    color:var(--text);

}


.product-tags span::before{

    content:"✓";

    color:var(--primary);

    font-weight:700;

    flex-shrink:0;

}


/* conditions the product is studied/used for */

.product-conditions{

    margin:0 0 16px;

    padding-top:12px;

    border-top:1px dashed var(--border);

    font-family:var(--font-body);

    font-size:12px;

    color:var(--text-muted);

    line-height:2;

}


.product-link{

    margin-top:auto;

    align-self:flex-start;

    font-family:var(--font-body);

    color:var(--primary);

    font-size:13px;

    font-weight:700;

}


.product-card:hover .product-link{

    color:var(--primary-dark);

}


/* Footer row: comparison / applications / research / consult CTA */

.menu-footer{

    display:flex;

    flex-direction:row-reverse;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    margin-top:24px;

    padding-top:18px;

    border-top:1px solid var(--border);

}


.menu-footer a{

    padding:0!important;

    font-family:var(--font-body);

    font-size:13px;

    font-weight:var(--heading-weight);

    color:var(--text-muted);

    text-decoration:none;

    transition:var(--transition);

}


.menu-footer a:hover{

    color:var(--primary);

}


.menu-footer a:last-child{

    color:var(--primary);

}


.menu-footer a:last-child:hover{

    color:var(--primary-dark);

}


@media(max-width:768px){

    .product-card img{

        height:110px;

    }

}


/* =========================================
   Responsive
========================================= */


@media(max-width:1200px){


    .mega-menu{

        width:90vw;

    }



    .menu-image{

        display:none;

    }



    .menu-intro,
    .menu-links{

        width:50%;

    }

    .product-card img{
        height:90px;
    }

    .products-menu .menu-intro{

        flex-direction:column;

        align-items:flex-start;

        text-align:right;

        gap:16px;

    }


    .products-menu .menu-intro,
    .products-menu .menu-links{

        width:100%;

    }


    .products-menu .menu-links{

        justify-content:flex-start;

    }



}



@media(max-width:768px){

    .mega-menu{
        flex-direction:column;
        width:calc(100vw - 40px);
        right:-20px;
        position:static;
        box-shadow:none;
        display:none;
    }

    .dropdown.open .mega-menu{
        display:flex;
    }

    .menu-intro,
    .menu-links{
        width:100%;
    }

    .menu-text{
        width:100%;
    }

    .products-grid{
        flex-direction:column;
    }

    .products-menu .menu-links{
        flex-direction:column;
        align-items:stretch;
    }

    .menu-footer{
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
    }
}

.hamburger-btn{
    display:none;
    flex-direction:column;
    justify-content:space-between;
    width:26px;
    height:20px;
    background:transparent;
    border:none;
    cursor:pointer;
    z-index:1001;
}

.hamburger-btn span{
    display:block;
    width:100%;
    height:2px;
    background:var(--text);
    transition:var(--transition);
}

.hamburger-btn.active span:nth-child(1){
    transform:translateY(9px) rotate(45deg);
}
.hamburger-btn.active span:nth-child(2){
    opacity:0;
}
.hamburger-btn.active span:nth-child(3){
    transform:translateY(-9px) rotate(-45deg);
}

@media(max-width:768px){

    .hamburger-btn{
        display:flex;
    }

    .nav-menu{
        position:fixed;
        top:0;
        right:-100%;
        width:80%;
        max-width:320px;
        height:100vh;
        flex-direction:column;
        background:var(--surface);
        padding:80px 24px 24px;
        transition:right .3s ease;
        overflow-y:auto;
        z-index:1000;
    }

    .nav-menu.active{
        right:0;
    }

    .mega-menu{
        position:static;
        width:100%;
        box-shadow:none;
    }
}