/*=========================================================
                    HEADER.CSS
        Manasadwip Ramakrishna Mission Praktani Samsad
==========================================================*/


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

.top-header{
    background:#ffffff;
    border-bottom:1px solid #e8edf3;
    position:relative;
    z-index:100;
}

/*=========================================
        WELCOME USER
=========================================*/

.welcome-user{

    display:flex;

    align-items:center;

    gap:8px;

    padding:10px 14px;

    background:#f5f7fb;

    border-radius:30px;

    color:#0B2D5B;

    font-size:15px;

    font-weight:600;

}

.welcome-user i{

    font-size:22px;

    color:#0B2D5B;

}

.welcome-user strong{

    color:#C89B3C;

}

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

.header-wrapper{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    padding:18px 0;
}


/*=========================================================
                    BRAND
==========================================================*/

.brand{
    display:flex;
    align-items:center;
    gap:18px;
}


/*=========================================================
                    LOGO
==========================================================*/

.brand-logo{
    width:78px;
    height:78px;
    object-fit:contain;
    flex-shrink:0;
}


/*=========================================================
                    BRAND TEXT
==========================================================*/

.brand-text{
    display:flex;
    flex-direction:column;
}

.brand-text p{
    margin:0;
    color:#666;
    font-size:13px;
    font-weight:500;
    letter-spacing:2px;
    text-transform:uppercase;
}

.brand-text h1{
    margin:4px 0 0;
    color:var(--primary);
    font-family:'Cinzel',serif;
    font-size:30px;
    font-weight:700;
    line-height:1.2;
}


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

.header-action{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}


/*=========================================================
                    COMMON BUTTON
==========================================================*/

.header-action a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:46px;
    padding:0 22px;
    border-radius:8px;
    font-size:14px;
    font-weight:600;
    text-decoration:none;
    transition:.30s ease;
}


/*=========================================================
                    LOGIN
==========================================================*/

.login-btn{
    background:var(--primary);
    color:#fff;
}

.login-btn:hover{
    background:#082349;
    color:#fff;
}


/*=========================================================
                    REGISTER
==========================================================*/

.register-btn{
    border:2px solid var(--primary);
    color:var(--primary);
    background:#fff;
}

.register-btn:hover{
    background:var(--primary);
    color:#fff;
}


/*=========================================================
                    DONATE
==========================================================*/

.donate-btn{
    background:var(--secondary);
    color:#fff;
}

.donate-btn:hover{
    background:#b88710;
    color:#fff;
}


/*=========================================================
                    LARGE TABLETS
==========================================================*/

@media (max-width:992px){

.header-wrapper{
    flex-direction:column;
    justify-content:center;
    text-align:center;
    gap:22px;
}

.brand{
    flex-direction:column;
    gap:12px;
}

.brand-logo{
    width:70px;
    height:70px;
}

.brand-text p{
    letter-spacing:1px;
    font-size:12px;
}

.brand-text h1{
    font-size:24px;
}

.header-action{
    width:100%;
    justify-content:center;
}

}


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

@media (max-width:576px){

.top-header{
    padding:8px 0;
}

.header-wrapper{
    gap:18px;
    padding:10px 0;
}

.brand{
    gap:10px;
}

.brand-logo{
    width:55px;
    height:55px;
}

.brand-text p{
    font-size:10px;
    letter-spacing:1px;
}

.brand-text h1{
    font-size:18px;
}

.header-action{
    width:100%;
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
}

.header-action a{
    width:100%;
    min-height:44px;
    font-size:14px;
    padding:0 15px;
}

}


/*=========================================================
            EXTRA SMALL DEVICES
==========================================================*/

@media (max-width:360px){

.brand-logo{
    width:48px;
    height:48px;
}

.brand-text h1{
    font-size:16px;
}

.brand-text p{
    font-size:9px;
}

.header-action a{
    font-size:13px;
}

}