/*
|--------------------------------------------------------------------------
| MaitriAdda Main Stylesheet
|--------------------------------------------------------------------------
| Save this file at: public_html/assets/css/style.css
*/

:root {
    --primary-blue: #123c69;
    --primary-blue-dark: #0b2948;
    --soft-blue: #eaf2fb;
    --soft-grey: #f5f7fa;
    --text-dark: #1f2933;
    --text-muted: #65758b;
    --white: #ffffff;
    --border-light: #dde5ee;
}

body {
    font-family: "Roboto", Arial, sans-serif;
    color: var(--text-dark);
    background-color: var(--white);
    line-height: 1.6;
}

.text-primary-blue {
    color: var(--primary-blue) !important;
}

.bg-soft-blue {
    background-color: var(--soft-blue);
}

.btn-primary {
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--primary-blue-dark);
    border-color: var(--primary-blue-dark);
}

.btn-outline-primary {
    color: var(--primary-blue);
    border-color: var(--primary-blue);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
    color: var(--white);
}

.navbar-brand {
    letter-spacing: 0;
}

.nav-link {
    color: var(--text-dark);
    font-weight: 500;
}

.nav-link.active,
.nav-link:hover {
    color: var(--primary-blue);
}

.hero-section {
    background: linear-gradient(180deg, #ffffff 0%, #f5f7fa 100%);
}

.min-vh-75 {
    min-height: 75vh;
}

.hero-title {
    max-width: 720px;
    font-size: clamp(2.2rem, 5vw, 4.25rem);
    font-weight: 700;
    line-height: 1.1;
    color: var(--primary-blue-dark);
}

.hero-text {
    max-width: 640px;
    font-size: 1.125rem;
    color: var(--text-muted);
}

.trust-panel,
.feature-box,
.auth-box,
.dashboard-panel,
.directory-filter,
.member-card,
.profile-view-box,
.connection-box,
.request-card,
.message-thread-box {
    background-color: var(--white);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    box-shadow: 0 16px 40px rgba(18, 60, 105, 0.08);
}

.trust-panel {
    padding: 24px;
}

.trust-item {
    padding: 12px 0;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-dark);
}

.trust-item:last-child {
    border-bottom: 0;
}

.trust-item::before {
    content: "✓";
    display: inline-block;
    margin-right: 10px;
    color: var(--primary-blue);
    font-weight: 700;
}

.section-light {
    background-color: var(--soft-grey);
}

.feature-box {
    height: 100%;
    padding: 24px;
}

.feature-box p {
    margin-bottom: 0;
    color: var(--text-muted);
}

.site-footer {
    color: var(--text-muted);
}

/*
|--------------------------------------------------------------------------
| Auth, Dashboard, Profile
|--------------------------------------------------------------------------
*/

.auth-box {
    max-width: 520px;
    padding: 28px;
}

.profile-box {
    max-width: 720px;
}

.dashboard-panel {
    max-width: 820px;
    padding: 32px;
}

.mini-stat {
    background-color: var(--soft-grey);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 18px;
}

.mini-stat span {
    display: block;
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 4px;
}

.mini-stat strong {
    color: var(--primary-blue-dark);
    font-size: 1.05rem;
}

.profile-summary,
.profile-section {
    background-color: var(--soft-grey);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 22px;
}

.profile-section {
    margin-bottom: 18px;
}

/*
|--------------------------------------------------------------------------
| Member Directory
|--------------------------------------------------------------------------
*/

.directory-filter {
    padding: 22px;
}

.member-card {
    height: 100%;
    padding: 24px;
}

.member-meta {
    color: var(--text-muted);
    font-size: 0.95rem;
}

.member-bio {
    color: var(--text-dark);
}

.member-interests {
    color: var(--text-muted);
    font-size: 0.95rem;
}

.profile-view-box {
    max-width: 820px;
    padding: 32px;
}

/*
|--------------------------------------------------------------------------
| Connection Requests
|--------------------------------------------------------------------------
*/

.connection-box,
.request-card {
    padding: 22px;
}

.request-list{

    display:grid;

    gap:20px;

    background:white;

    padding:20px;

}

.request-card {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
}

.request-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/*
|--------------------------------------------------------------------------
| Messages / Chat
|--------------------------------------------------------------------------
*/

.message-thread-box {
    max-width: 900px;
    padding: 28px;
}

.messages-area {
    background-color: #f5f7fa;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 18px;
    max-height: 520px;
    overflow-y: auto;
}

.message-row {
    display: flex;
    width: 100%;
    margin-bottom: 14px;
}

.message-own {
    justify-content: flex-end;
}

.message-other {
    justify-content: flex-start;
}

.message-bubble {
    max-width: 72%;
    border-radius: 8px;
    padding: 12px 14px;
    border: 1px solid var(--border-light);
    box-shadow: 0 4px 12px rgba(18, 60, 105, 0.06);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.message-other .message-bubble {
    background-color: #ffffff;
    color: #1f2933;
    border-color: #d8e2ee;
}

.message-own .message-bubble {
    background-color: #123c69;
    color: #ffffff;
    border-color: #123c69;
}

.message-bubble p {
    color: inherit;
    margin-bottom: 4px;
}

.message-bubble small {
    display: block;
    margin-top: 4px;
    font-size: 0.78rem;
}

.message-other .message-bubble small {
    color: #65758b;
}

.message-own .message-bubble small {
    color: rgba(255, 255, 255, 0.82);
}

/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

@media (max-width: 575.98px) {
    .hero-title {
        font-size: 2.3rem;
    }

    .hero-text {
        font-size: 1rem;
    }

    .btn-lg {
        width: 100%;
    }

    .auth-box,
    .dashboard-panel,
    .profile-view-box,
    .message-thread-box {
        padding: 18px;
    }

    .messages-area {
        padding: 14px;
    }

    .message-bubble {
        max-width: 92%;
    }

    .request-card {
        flex-direction: column;
    }

    .request-actions,
    .request-actions form,
    .request-actions button {
        width: 100%;
    }
}

.btn-outline-danger {
    color: #b42318;
    border-color: #b42318;
}

.btn-outline-danger:hover,
.btn-outline-danger:focus {
    background-color: #b42318;
    border-color: #b42318;
    color: #ffffff;
}

/*
|--------------------------------------------------------------------------
| Admin
|--------------------------------------------------------------------------
*/

.admin-table-box {
    background-color: var(--white);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 18px;
    box-shadow: 0 16px 40px rgba(18, 60, 105, 0.08);
}

.table th {
    color: var(--primary-blue-dark);
    font-weight: 700;
}

.table td {
    color: var(--text-dark);
}

/*
|--------------------------------------------------------------------------
| Content Pages and Footer
|--------------------------------------------------------------------------
*/

.content-page {
    max-width: 860px;
    background-color: var(--white);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 32px;
    box-shadow: 0 16px 40px rgba(18, 60, 105, 0.08);
}

.content-page h1 {
    color: var(--primary-blue-dark);
    font-size: 2rem;
    margin-bottom: 18px;
}

.content-page h2 {
    color: var(--primary-blue-dark);
    font-size: 1.25rem;
    margin-top: 28px;
    margin-bottom: 10px;
}

.content-page p {
    color: var(--text-muted);
}

.contact-box {
    background-color: var(--soft-grey);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 20px;
    margin-top: 18px;
}

.footer-links {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.footer-links li {
    margin-bottom: 8px;
}

.footer-links a {
    color: var(--text-muted);
    text-decoration: none;
}

.footer-links a:hover,
.footer-links a:focus {
    color: var(--primary-blue);
    text-decoration: underline;
}

@media (max-width: 575.98px) {
    .content-page {
        padding: 22px;
    }

    .content-page h1 {
        font-size: 1.65rem;
    }
}

.support-message-status {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 8px;
    background-color: var(--soft-blue);
    color: var(--primary-blue);
    font-size: 0.85rem;
    font-weight: 500;
}

/*
|--------------------------------------------------------------------------
| Account Settings
|--------------------------------------------------------------------------
*/

.settings-layout {
    max-width: 820px;
}

.settings-card {
    background-color: var(--white);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 32px;
    box-shadow: 0 16px 40px rgba(18, 60, 105, 0.08);
}

@media (max-width: 575.98px) {
    .settings-card {
        padding: 22px;
    }
}
.profile-avatar {
width: 120px;
height: 120px;
border-radius: 50%;
object-fit: cover;
border: 4px solid #ffffff;
box-shadow: 0 10px 30px rgba(18,60,105,.15);
}

.member-avatar {
width: 72px;
height: 72px;
border-radius: 50%;
object-fit: cover;
border: 2px solid #dde5ee;
}

.avatar-placeholder {
width: 120px;
height: 120px;
border-radius: 50%;
background: #123c69;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.25rem;
font-weight: 700;
}

/* ==================================================
   MaitriAdda Logo
================================================== */

.site-logo{
    display:flex;
    align-items:center;
    gap:10px;
}
.site-logo img{
    height:30px !important;
    width:auto;
}

.custom-navbar{
    min-height:70px;
    display:flex;
    align-items:center;
}

.brand-text{
    font-size:1.4rem;
    font-weight:700;
    color:#123c69;
}
.text-purple{
    color:#7C3AED;
}

.text-teal{
    color:#14B8A6;
}

/* ==================================================
   Premium Header Navigation
================================================== */

.custom-navbar .nav-link{

    display:flex;
    align-items:center;
    gap:8px;

    padding:10px 16px;

    border-radius:14px;

    color:#123c69;

    font-weight:500;

    transition:all .25s ease;
}

/* Hover */

.custom-navbar .nav-link:hover{

    background:#edf3fb;

    color:#123c69;

    transform:translateY(-1px);
}

/* Active menu */

.custom-navbar .nav-link.active{

    background:#123c69;

    color:#ffffff !important;
}

/* Icons */

.custom-navbar .nav-link i{

    font-size:1.05rem;
}

/* ==================================================
   Profile Dropdown
================================================== */

.dropdown-menu{

    border:none;

    border-radius:18px;

    box-shadow:
    0 15px 35px rgba(18,60,105,.15);

    padding:10px;
}

.dropdown-item{

    border-radius:12px;

    padding:10px 15px;

    transition:.2s;
}

.dropdown-item:hover{

    background:#f4f7fb;

    color:#123c69;
}

/* ==================================================
   Header Profile Photo
================================================== */

.header-profile-photo{
    width:38px;
    height:38px;
    object-fit:cover;
    border-radius:50%;
    border:2px solid #dde5ee;
}

.header-profile-photo:hover{

    border-color:#123c69;
}

/* ==========================
   Header Notification Badge
========================== */

.menu-badge{

    background:#dc3545;

    color:#fff;

    min-width:20px;

    height:20px;

    border-radius:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:.75rem;

    font-weight:600;

    margin-left:6px;
}



.dropdown-menu{

    min-width:260px;
}

/* ==================================
   Interest Tags
================================== */

.interest-badge{

    background:#eaf2fb;

    color:#123c69;

    padding:8px 14px;

    border-radius:50px;

    font-size:.9rem;

    font-weight:500;
}

.btn-join-now{
    display:inline-block;
    padding:10px 20px;
    background:#ffffff;
    color:#123c69;
    border:1px solid #123c69;
    border-radius:10px;
    text-decoration:none;
    font-weight:500;
    transition:.2s;
}

.btn-join-now:hover{
    background:#123c69;
    color:#ffffff;
}

.custom-navbar .container{
    display:flex;
    align-items:center;
}

.navbar-nav{
    align-items:center;
}

.custom-navbar .navbar-collapse{
    justify-content:flex-end;
}


/*=================================================
  MAITRIADDA PREMIUM MESSENGER V2
=================================================*/

.conversation-card{
    display:block;
    background:#ffffff;
    border:1px solid #e6edf5;
    border-radius:16px;
    padding:18px;
    margin-bottom:16px;
    text-decoration:none !important;
    color:inherit;
    transition:all .25s ease;
    box-shadow:0 3px 10px rgba(0,0,0,.05);
}

.conversation-card:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(18,60,105,.12);
    border-left:5px solid #123C69;
}

.conversation-content{
    display:flex;
    align-items:flex-start;
    gap:16px;
}

.conversation-avatar{
    flex-shrink:0;
}

.conversation-photo{
    width:60px;
    height:60px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid #123C69;
}

.conversation-placeholder{
    width:60px;
    height:60px;
    border-radius:50%;
    background:#123C69;
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:24px;
    font-weight:700;
}

.conversation-details{
    flex:1;
}

.conversation-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:8px;
}

.conversation-name{
    margin:0;
    font-size:20px;
    font-weight:600;
    color:#123C69;
}

.conversation-city{
    margin:2px 0 0;
    font-size:13px;
    color:#888;
}

.conversation-time{
    font-size:13px;
    color:#777;
}

.conversation-preview{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
}

.conversation-message{
    flex:1;
    margin:0;
    color:#555;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.unread-badge{
    width:28px;
    height:28px;
    border-radius:50%;
    background:#F4A261;
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:13px;
    font-weight:bold;
}

@media (max-width:768px){

.conversation-photo,
.conversation-placeholder{

    width:48px;
    height:48px;

}

.conversation-name{

    font-size:17px;

}

}

@media (max-width:576px){

    .conversation-header{

        flex-direction:column;

        gap:4px;

    }

    .conversation-preview{

        flex-direction:column;

        align-items:flex-start;

    }

    .conversation-time{

        margin-top:4px;

    }

}


/*=================================================
  Dashboard 2.0
=================================================*/

.dashboard-card{

    background:#ffffff;

    border:1px solid #e6edf5;

    border-radius:18px;

    padding:24px;

    transition:.25s ease;

    box-shadow:0 6px 18px rgba(18,60,105,.06);

    height:100%;
}

.dashboard-card:hover{

    transform:translateY(-4px);

    box-shadow:0 18px 35px rgba(18,60,105,.12);

}

.dashboard-icon{

    width:70px;

    height:70px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

    margin:0 auto 18px;

    background:#edf4fb;

    color:#123C69;

}

.dashboard-value{

    font-size:2rem;

    font-weight:700;

    color:#123C69;

}

.dashboard-title{

    color:#6c757d;

    font-size:.95rem;

}

/* ===================================================
   Dashboard Premium Cards
=================================================== */

.mini-stat{
    background:#ffffff;
    border-radius:18px;
    padding:25px;
    text-align:center;
    border:1px solid #edf2f7;
    box-shadow:0 8px 25px rgba(0,0,0,.05);
    transition:all .30s ease;
    height:100%;
}

.mini-stat:hover{
    transform:translateY(-5px);
    box-shadow:0 15px 35px rgba(18,60,105,.12);
    border-color:#F4A261;
}

.mini-stat .fs-1{
    margin-bottom:12px;
}

.mini-stat span{
    display:block;
    color:#6c757d;
    font-size:15px;
}

.mini-stat strong{
    display:block;
    margin-top:8px;
    font-size:32px;
    font-weight:700;
    color:#123C69;
}

/* ==================================
   Profile Strength
================================== */

.progress{

    border-radius:30px;

    background:#edf2f7;

}

.progress-bar{

    border-radius:30px;

    transition:width .6s ease;

}

/*==========================================
 Premium Notifications
==========================================*/

.notification-card{

    background:#fff;

    transition:.25s ease;

    cursor:pointer;

}

.notification-card:hover{

    transform:translateY(-3px);

    box-shadow:0 10px 25px rgba(0,0,0,.10);

}

.notification-card h6{

    font-weight:600;

}

.notification-card p{

    margin-bottom:.5rem;

}

/* Notification Icon */

.notification-card .rounded-circle{

    width:55px;

    height:55px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

}

.notification-card .rounded-circle i{

    font-size:22px;

}

/*=========================================
 Premium Member Profile
=========================================*/

.profile-cover{

height:180px;

border-radius:20px;

margin-bottom:-70px;

background:linear-gradient(135deg,#123C69,#2D6A9F);

}

.profile-avatar{

width:140px;

height:140px;

border-radius:50%;

border:5px solid #fff;

object-fit:cover;

box-shadow:0 10px 25px rgba(0,0,0,.18);

position:relative;

z-index:2;

}

.profile-view-box{

background:#fff;

border-radius:20px;

padding:30px;

box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.profile-section{

background:#fff;

border-radius:16px;

padding:24px;

margin-top:25px;

}

/* ===============================
   Profile Photo
================================== */

.profile-avatar{
    width:120px;
    height:120px;
    object-fit:cover;
    border-radius:50%;
    border:4px solid #ffffff;
    box-shadow:0 8px 25px rgba(0,0,0,.15);
    transition:.3s ease;
}

.profile-avatar:hover{
    transform:scale(1.05);
}

/*
|--------------------------------------------------------------------------
| MaitriAdda PWA Install Banner
|--------------------------------------------------------------------------
*/

.ma-pwa-install-banner {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 18px;
    z-index: 2000;
    display: none;
    align-items: center;
    gap: 14px;
    max-width: 720px;
    margin: 0 auto;
    padding: 14px 16px;
    background:
        radial-gradient(circle at top left, rgba(255, 106, 0, 0.14), transparent 34%),
        linear-gradient(135deg, #ffffff 0%, #fffaf4 52%, #f8fbff 100%);
    border: 1px solid #F1DDC8;
    border-radius: 24px;
    box-shadow: 0 22px 54px rgba(8, 39, 92, 0.18);
}

.ma-pwa-install-banner.show {
    display: flex;
}

.ma-pwa-install-icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 10px 22px rgba(8, 39, 92, 0.14);
}

.ma-pwa-install-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ma-pwa-install-content {
    flex: 1;
    min-width: 0;
}

.ma-pwa-install-content strong {
    display: block;
    color: #062B5F;
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 2px;
}

.ma-pwa-install-content span {
    display: block;
    color: #6B7280;
    font-size: 13px;
    line-height: 1.4;
}

.ma-pwa-install-btn {
    border: none;
    border-radius: 999px;
    padding: 9px 16px;
    background: linear-gradient(135deg, #FF6A00, #FF8A1C);
    color: #ffffff;
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 12px 24px rgba(255, 106, 0, 0.24);
}

.ma-pwa-install-close {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 999px;
    background: #fff7ed;
    color: #6B7280;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 575px) {
    .ma-pwa-install-banner {
        left: 10px;
        right: 10px;
        bottom: 12px;
        padding: 12px;
        border-radius: 22px;
        gap: 10px;
    }

    .ma-pwa-install-icon {
        width: 42px;
        height: 42px;
        border-radius: 14px;
    }

    .ma-pwa-install-content strong {
        font-size: 14px;
    }

    .ma-pwa-install-content span {
        font-size: 12px;
    }

    .ma-pwa-install-btn {
        padding: 8px 12px;
        font-size: 13px;
    }
}

/*
|--------------------------------------------------------------------------
| MaitriAdda Production UI Polish — Brand Readability
|--------------------------------------------------------------------------
| Added: 2026-08-20
|
| Purpose:
| - Keep the current header HTML unchanged.
| - Make the Marathi brand line crisp and readable.
| - Use only font weights already loaded by the shared header.
| - Preserve the existing logo size, navigation and page-level layouts.
| - Use higher specificity because maitriadda-premium.css loads after this file.
|--------------------------------------------------------------------------
*/

.ma-navbar .navbar-brand.ma-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    margin-right: 1rem;
    padding-top: 0;
    padding-bottom: 0;
    color: inherit;
    text-decoration: none;
}

.ma-navbar .navbar-brand.ma-brand .ma-brand-logo-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
}

.ma-navbar .navbar-brand.ma-brand .ma-brand-logo-wrap img {
    display: block;
    width: 34px;
    height: 34px;
    max-width: 100%;
    object-fit: contain;
}

.ma-navbar .navbar-brand.ma-brand .ma-brand-text {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    min-width: 0;
    line-height: normal !important;
}

.ma-navbar .navbar-brand.ma-brand .ma-brand-text > strong {
    display: block;
    margin: 0;
    padding: 0;
    color: #062B5F;
    font-family: "Montserrat", "Open Sans", Arial, sans-serif;
    font-size: 21px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.35px;
    white-space: nowrap;
}

.ma-navbar .navbar-brand.ma-brand .ma-brand-text > span[lang="mr"],
.ma-navbar .navbar-brand.ma-brand .ma-brand-text > span {
    display: block;
    margin: 3px 0 0;
    padding: 0;
    color: #667085;
    font-family: "Nirmala UI", "Mangal", sans-serif !important;
    font-size: 12px !important;
    font-style: normal;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
    text-rendering: optimizeLegibility;
    white-space: nowrap;
}

.ma-navbar .navbar-brand.ma-brand:focus-visible {
    outline: 3px solid rgba(242, 140, 40, 0.42);
    outline-offset: 4px;
    border-radius: 12px;
}

/*
| Mobile brand balance
| The full Marathi identity remains visible; it is not hidden on small screens.
*/
@media (max-width: 575.98px) {
    .ma-navbar .navbar-brand.ma-brand {
        gap: 8px;
        margin-right: 0.5rem;
    }

    .ma-navbar .navbar-brand.ma-brand .ma-brand-logo-wrap {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
    }

    .ma-navbar .navbar-brand.ma-brand .ma-brand-logo-wrap img {
        width: 31px;
        height: 31px;
    }

    .ma-navbar .navbar-brand.ma-brand .ma-brand-text > strong {
        font-size: 18.5px;
        line-height: 1.08;
        letter-spacing: -0.25px;
    }

    .ma-navbar .navbar-brand.ma-brand .ma-brand-text > span[lang="mr"],
    .ma-navbar .navbar-brand.ma-brand .ma-brand-text > span {
        margin-top: 2px;
        font-size: 11.25px !important;
        line-height: 1.38 !important;
    }
}

@media (max-width: 359.98px) {
    .ma-navbar .navbar-brand.ma-brand {
        gap: 7px;
    }

    .ma-navbar .navbar-brand.ma-brand .ma-brand-logo-wrap {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
    }

    .ma-navbar .navbar-brand.ma-brand .ma-brand-logo-wrap img {
        width: 29px;
        height: 29px;
    }

    .ma-navbar .navbar-brand.ma-brand .ma-brand-text > strong {
        font-size: 17.5px;
    }

    .ma-navbar .navbar-brand.ma-brand .ma-brand-text > span[lang="mr"],
    .ma-navbar .navbar-brand.ma-brand .ma-brand-text > span {
        font-size: 10.5px !important;
    }
}

/*
| Motion accessibility
| Does not change normal animation behaviour.
*/
@media (prefers-reduced-motion: reduce) {
    .ma-navbar .navbar-brand.ma-brand,
    .ma-navbar .navbar-brand.ma-brand *,
    .custom-navbar .nav-link,
    .conversation-card,
    .dashboard-card,
    .mini-stat,
    .profile-avatar,
    .notification-card {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}