:root {
    --bs-primary: #0d6efd;
    --bs-light: #fafafa;
    --bs-dark: #212529;
    --bs-success: #198754;
    --bs-danger: #dc3545;
    --bs-warning: #ffc107;
    --bs-info: #0dcaf0;
    --bs-jiro: #731851;
    --bs-white: #ffffff;

    --gutter: 1rem;
    --container-max: 1800px;
    --radius: 0.25rem;
}

/*@font-face {*/
/*    font-family: 'Vazir';*/
/*    src: url('./fonts/Vazir-FD-WOL.woff2') format('woff2'),*/
/*    url('./fonts/Vazir-FD-WOL.woff') format('woff');*/
/*    font-weight: normal;*/
/*    font-style: normal;*/
/*    font-display: swap;*/
/*}*/

html, body {
    height: 100%;
    margin: 0;
    overflow-x: hidden;
}

body {
    display: flex;
    flex-direction: column;
    font-family: 'Vazir', serif;
    color: var(--bs-light);
}

main {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

footer {
    flex-shrink: 0;
    background-color: var(--bs-dark);
    text-align: center;
    color: var(--bs-light);
}

a {
    text-decoration: none;
}

ul {
    direction: rtl;
}

ul li {
    list-style: none;
    display: inline-block; /* makes list items sit side-by-side */
    margin-right: .5rem;
}

nav {
    padding: 10px 0;
}

.nav-header {
    display: none; /* hidden on desktop */
}

.nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; /* horizontal on desktop */
    justify-content: center;
    gap: .75rem;
}

.nav-menu li a {
    text-decoration: none;
}

.container {
    width: 100%;
    max-width: var(--container-max);
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    overflow-x: hidden;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
}

.col {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    flex: 1 1 0%;
    min-width: 0;
    box-sizing: border-box;
}

.col-1 {
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
}

.col-2 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
}

.col-3 {
    flex: 0 0 25%;
    max-width: 25%;
}

.col-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}

.col-6 {
    flex: 0 0 50%;
    max-width: 50%;
}

.col-8 {flex: 0 0 66.6667%;max-width: 66.6667%;}

.col-9 {flex: 0 0 75%;max-width: 75%;}

.col-12 {flex: 0 0 100%;max-width: 100%;}

.justify-item-left {
    display: flex !important;
    justify-content: flex-start !important;
}

.justify-item-center {
    display: flex !important;
    justify-content: center !important;
}

.justify-item-right {
    display: flex !important;
    justify-content: flex-end !important;
}

.align-item-top {
    display: flex !important;
    align-items: flex-start !important;
}

.align-item-center {
    display: flex !important;
    align-items: center !important;
}

.align-item-bottom {
    display: flex !important;
    align-items: flex-end !important;
}


/* ----- Typography ----- */
.h1 {
    font-size: 2rem;
    margin: 0 0 .5rem;
}

.h2 {
    font-size: 1.5rem;
    margin: 0 0 .5rem;
}

.h3 {
    font-size: 1.25rem;
    margin: 0 0 .5rem;
}

.h4 {
    font-size: 1rem;
    margin: 0 0 .5rem;
}

p {
    margin: 0 0 1rem;
    line-height: 1.5;
}

.font-12 {
    font-size: clamp(0.6rem, 0.6rem + 0.5vw, 0.75rem) !important;
}

.font-14 {
    font-size: clamp(0.8rem, 0.75rem + 0.5vw, 0.875rem) !important;
}

.font-16 {
    font-size: clamp(0.75rem, 0.9rem + 0.5vw, 1rem) !important;
}

.text-title {
    font-size: clamp(1rem, 1rem + 1vw, 2rem);
    font-weight: 700;
    line-height: 1.6;
}

.text-subtitle {
    font-size: clamp(0.75rem, 0.9rem + 0.5vw, 1.5rem);
    font-weight: 500;
}

/* ----- Text Alignment ----- */
.text-left {
    text-align: left !important;
}

.text-center {
    text-align: center !important;
}

.text-right {
    text-align: right !important;
}

/* ----- Colors ----- */
.bg-dark {
    background-color: var(--bs-dark) !important;
}

.bg-light {
    background-color: var(--bs-light) !important;
}

.bg-primary {
    background-color: var(--bs-primary) !important;
}

.bg-success {
    background-color: var(--bs-success) !important;
}

.bg-danger {
    background-color: var(--bs-danger) !important;
}

.bg-warning {
    background-color: var(--bs-warning) !important;
}

.bg-jiro {
    background-color: var(--bs-jiro) !important;
}

.bg-white {
    background-color: var(--bs-white) !important;
}

.text-light {
    color: var(--bs-light) !important;
}

.text-dark {
    color: var(--bs-dark) !important;
}

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

.text-success {
    color: var(--bs-success) !important;
}

.text-info {
    color: var(--bs-info) !important;
}

.text-danger {
    color: var(--bs-danger) !important;
}

.text-warning {
    color: var(--bs-warning) !important;
}

.text-jiro {
    color: var(--bs-jiro) !important;
}

.text-white {
    color: var(--bs-white) !important;
}

/* ----- Buttons ----- */
.btn {
    display: inline-block;
    text-align: center;
    padding: .25rem .75rem;
    border-radius: var(--radius);
    text-decoration: none;
    cursor: pointer;
    border: none;
}

.btn:active {
    transform: translateY(1px);
}

.btn-info {
    background-color: var(--bs-info);
    color: #fff;
    border: 1px solid var(--bs-info);
}

.btn-info:hover {
    background-color: #1e4fe0;
    border-color: #1e4fe0;
}

.btn-light {
    background-color: var(--bs-light);
    color: var(--bs-dark);
    border: 1px solid var(--bs-light);
}

.btn-light:hover {
    background-color: #e2e2e2;
    border-color: #e2e2e2;
}

.btn-outline-jiro {
    background-color: transparent;
    color: var(--bs-jiro);
    border: 1px solid var(--bs-jiro);
}

.btn-outline-jiro:hover {
    background-color: var(--bs-jiro);
    color: var(--bs-light);
}

.btn-outline-dark {background-color: transparent;color: var(--bs-dark);border: 1px solid var(--bs-dark);}
.btn-outline-dark:hover {background-color: var(--bs-dark);color: var(--bs-light);}

.btn-dark {background-color: var(--bs-primary);color: var(--bs-light);border: 1px solid var(--bs-primary);}
.btn-dark:hover {background-color: #000;border-color: #000;}

.d-block {display: block !important;}
.d-inline {display: inline !important;}

.p-0 {padding: 0 !important;}
.p-1 {padding: .25rem !important;}
.p-2 {padding: .5rem !important;}
.p-3 {padding: .75rem !important;}
.p-4 {padding: 1rem !important;}

.pt-1 {padding-top: .25rem !important;}
.pt-3 {padding-top: .75rem !important;}

.m-0 {margin: 0 !important;}
.m-1 {margin: 0.25rem !important;}
.m-2 {margin: 0.5rem !important;}

.mt-1 {margin-top: .25rem !important;}
.mt-3 {margin-top: .75rem !important;}

.mb-1 {margin-bottom: .25rem !important;}
.mb-3 {margin-bottom: .75rem !important;}
.mb-5 {margin-bottom: 2rem !important;}

.mr-1 {margin-right: .25rem !important;}
.ml-1 {margin-left: .25rem !important;}
.mr-2 {margin-right: .5rem !important;}
.ml-2 {margin-left: .5rem !important;}

.w-100 {width: 100vw !important;}

.img-fluid {max-width: 100%;height: auto;}

.img-rounded {border-radius: 50%;}

.img-avatar {
    display: inline-block;
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
}

.img-news{
    width: 100%;
    height: auto;
    max-height: 16rem;
    min-height: 15rem;
}

.icon-small {width: 1.2rem;height: 1.2rem;}
.icon-medium {width: 1.5rem;height: 1.5rem;}
.icon-large {width: 1.75rem;height: 1.75rem;}

.card {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 0.375rem;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    width: 100%;
}

.card-header {
    padding: 0.5rem 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
    font-weight: bold;
}

.card-img-top {
    width: 100%;
    height: auto;
    max-height: 14rem !important;
    display: block;
    object-fit: cover;
}

.card-body {flex: 1 1 auto;padding: 1rem;}

.border-top-light{border-top: 1px dashed var(--bs-light) !important;}
.border-top-dark{border-top: 1px dashed var(--bs-dark) !important;}
.border-1{border: 1px solid #e0e0e0; border-radius: 10px;}

[class*="col-"] {
    box-sizing: border-box;
}

@media (min-width: 992px) {
    .h1 {
        font-size: 2.5rem;
    }

    .h2 {
        font-size: 2rem;
    }

    .h3 {
        font-size: 1.75rem;
    }

    .h4 {
        font-size: 1.5rem;
    }
}


@media (max-width: 768px) {

    .nav-header {
        display: flex;
        justify-content: flex-end;
    }

    .nav-toggle {
        font-size: 28px;
        color: white;
        cursor: pointer;
    }

    .nav-menu {
        display: none;
        flex-direction: column;
        text-align: center;
        gap: 10px;
        margin-top: 10px;
    }

    .nav-menu.active {
        display: flex;
    }

    .col-sm-1 {
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }

    .col-sm-2 {
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    .col-sm-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-sm-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .col-sm-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-sm-8 {
        flex: 0 0 66.6667%;
        max-width: 66.6667%;
    }

    .col-sm-9 {flex: 0 0 75%;max-width: 75%;}
    
    .col-sm-12 {flex: 0 0 100%;max-width: 100%;}

    .text-sm-left {text-align: left !important;}

    .text-sm-center {
        text-align: center !important;
        justify-content: center !important;
    }

    .text-sm-right {
        text-align: right !important;
    }

    .img-news{
        width: 100%;
        height: auto;
        max-height: 15rem;
        min-height: 14rem;
    }
}