/*==================================================
RAHBAN TIR HEADER
Version 3.0
Designed for current header.php
==================================================*/


/*==================================================
ROOT
==================================================*/

:root{

    --rt-primary:#0E2A47;
    --rt-secondary:#0077C8;
    --rt-accent:#E53935;

    --rt-white:#FFFFFF;
    --rt-bg:#F8FAFC;
    --rt-border:#E6EAF0;
    --rt-text:#555;

    --rt-radius:14px;

    --rt-shadow:
        0 10px 30px rgba(0,0,0,.08);

    --rt-transition:.30s ease;

}


/*==================================================
RESET
==================================================*/

#rt-header,
#rt-header *{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

#rt-header{

    direction:rtl;
    position:relative;
    z-index:9999;
    font-family:"Vazirmatn",sans-serif;

}

#rt-header ul{

    list-style:none;

}

#rt-header a{

    text-decoration:none;
    transition:var(--rt-transition);

}

#rt-header img{

    display:block;
    max-width:100%;

}


/*==================================================
CONTAINER
==================================================*/

.rt-container{

    width:min(1400px,92%);
    margin:auto;

}


/*==================================================
TOP BAR
==================================================*/

.rt-topbar{

    background:var(--rt-primary);
    color:#fff;
    font-size:13px;

}

.rt-topbar-wrapper{

    display:flex;
    justify-content:space-between;
    align-items:center;
    min-height:44px;
    gap:20px;

}

.rt-topbar-info{

    display:flex;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;

}

.rt-top-item{

    display:flex;
    align-items:center;
    gap:8px;

}

.rt-top-item i{

    color:#89D2FF;
    font-size:13px;

}

.rt-top-item span,
.rt-top-item a{

    color:#fff;

}

.rt-top-divider{

    width:1px;
    height:14px;
    background:rgba(255,255,255,.25);

}

.rt-topbar-social{

    display:flex;
    align-items:center;
    gap:10px;

}

.rt-topbar-social a{

    width:30px;
    height:30px;

    display:flex;
    justify-content:center;
    align-items:center;

    color:#fff;

    border-radius:50%;

}

.rt-topbar-social a:hover{

    background:rgba(255,255,255,.12);

}


/*==================================================
MAIN HEADER
==================================================*/

.rt-main-header{

    background:#fff;
    box-shadow:0 3px 15px rgba(0,0,0,.05);

}

.rt-header-wrapper{

    min-height:90px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:40px;

}


/*==================================================
LOGO
==================================================*/

.rt-logo{

    flex-shrink:0;

}

.rt-logo img{

    height:64px;
    width:auto;

}

/*==================================================
part1
==================================================*/
/*==================================================
DESKTOP NAVIGATION
==================================================*/

.rt-navigation{

    flex:1;

    display:flex;

    justify-content:center;

    align-items:center;

}

.rt-menu{

    display:flex;

    align-items:center;

    gap:34px;

}

.rt-menu>li{

    position:relative;

}

.rt-menu>li>a{

    display:flex;

    align-items:center;

    gap:8px;

    height:90px;

    color:var(--rt-primary);

    font-size:15px;

    font-weight:600;

    transition:var(--rt-transition);

    position:relative;

}

.rt-menu>li>a::after{

    content:"";

    position:absolute;

    bottom:0;

    right:0;

    width:0;

    height:3px;

    background:var(--rt-secondary);

    transition:.30s;

}

.rt-menu>li:hover>a{

    color:var(--rt-secondary);

}

.rt-menu>li:hover>a::after,

.rt-menu>li.active>a::after{

    width:100%;

}

.rt-menu>li.active>a{

    color:var(--rt-secondary);

}


/*==================================================
DROPDOWN
==================================================*/

.rt-dropdown{

    position:absolute;

    top:100%;

    right:0;

    min-width:240px;

    background:#fff;

    border-radius:14px;

    box-shadow:var(--rt-shadow);

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    transition:.30s;

    overflow:hidden;

    z-index:999;

}

.rt-has-dropdown:hover .rt-dropdown{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.rt-dropdown li{

    border-bottom:1px solid #EEF2F7;

}

.rt-dropdown li:last-child{

    border-bottom:none;

}

.rt-dropdown a{

    display:block;

    padding:15px 22px;

    color:var(--rt-primary);

    font-size:14px;

    transition:.30s;

}

.rt-dropdown a:hover{

    background:#F8FAFC;

    color:var(--rt-secondary);

    padding-right:30px;

}


/*==================================================
MEGA MENU
==================================================*/

.rt-mega-menu{

    position:absolute;

    top:100%;

    right:50%;

    transform:translateX(50%) translateY(20px);

    width:980px;

    background:#fff;

    border-radius:18px;

    box-shadow:0 20px 50px rgba(0,0,0,.08);

    padding:34px;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:999;

}

.rt-has-mega:hover .rt-mega-menu{

    opacity:1;

    visibility:visible;

    transform:translateX(50%) translateY(0);

}

.rt-mega-column h4{

    color:var(--rt-primary);

    font-size:15px;

    margin-bottom:14px;

    font-weight:700;

}

.rt-mega-column ul{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.rt-mega-column a{

    color:var(--rt-text);

    font-size:14px;

    display:block;

    transition:.30s;

}

.rt-mega-column a:hover{

    color:var(--rt-secondary);

    transform:translateX(-6px);

}


/*==================================================
part 2
==================================================*/


