/*
=====================================================
MIR RABBY OFFICIAL
Version 2026 Edition

Typography System
Human Rights • Social Service • Public Affairs
=====================================================
*/

/* =========================================
   GOOGLE FONT
========================================= */

@import url("https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700;800&display=swap");


/* =========================================
   BODY
========================================= */

body{

    font-family:"Inter","Hind Siliguri",sans-serif;

    font-size:16px;

    font-weight:400;

    line-height:1.7;

    color:var(--text-color);

    background:var(--body-bg);

}


/* =========================================
   HEADINGS
========================================= */

h1,
h2,
h3,
h4,
h5,
h6{

    font-family:"Inter","Hind Siliguri",sans-serif;

    font-weight:700;

    color:var(--text-color);

    line-height:1.25;

    margin-bottom:1rem;

}

h1{

    font-size:3rem;

}

h2{

    font-size:2.4rem;

}

h3{

    font-size:2rem;

}

h4{

    font-size:1.6rem;

}

h5{

    font-size:1.3rem;

}

h6{

    font-size:1.1rem;

}


/* =========================================
   PARAGRAPH
========================================= */

p{

    color:var(--text-light);

    margin-bottom:1rem;

}


/* =========================================
   SMALL TEXT
========================================= */

small{

    font-size:.875rem;

}


/* =========================================
   STRONG
========================================= */

strong{

    font-weight:700;

}


/* =========================================
   BLOCKQUOTE
========================================= */

blockquote{

    padding:1.5rem;

    border-left:5px solid var(--primary-color);

    background:rgba(11,93,59,.06);

    border-radius:var(--radius-md);

    font-style:italic;

    margin:2rem 0;

}


/* =========================================
   CODE
========================================= */

code{

    font-family:monospace;

    padding:.2rem .4rem;

    border-radius:6px;

    background:#eef2f7;

}


/* =========================================
   TEXT UTILITIES
========================================= */

.text-center{

    text-align:center;

}

.text-left{

    text-align:left;

}

.text-right{

    text-align:right;

}

.text-primary{

    color:var(--primary-color);

}

.text-secondary{

    color:var(--secondary-color);

}

.text-light{

    color:var(--text-light);

}

.text-white{

    color:var(--white-color);

}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width:768px){

    h1{

        font-size:2.2rem;

    }

    h2{

        font-size:1.9rem;

    }

    h3{

        font-size:1.6rem;

    }

    h4{

        font-size:1.35rem;

    }

}
/* =========================================
   LINKS
========================================= */

a{

    color:var(--primary-color);

    text-decoration:none;

    transition:all .3s ease;

}

a:hover{

    color:var(--secondary-color);

}

a:focus-visible{

    outline:2px solid var(--primary-color);

    outline-offset:3px;

}


/* =========================================
   LISTS
========================================= */

ul,
ol{

    margin:0 0 1rem 1.5rem;

    padding:0;

}

li{

    margin-bottom:.5rem;

    color:var(--text-color);

}


/* =========================================
   HR
========================================= */

hr{

    border:none;

    height:1px;

    background:var(--border-color);

    margin:2rem 0;

}


/* =========================================
   MARK
========================================= */

mark{

    background:#fff3b0;

    color:#000;

    padding:.1rem .3rem;

    border-radius:4px;

}


/* =========================================
   SELECTION
========================================= */

::selection{

    background:var(--primary-color);

    color:#fff;

}

::-moz-selection{

    background:var(--primary-color);

    color:#fff;

}


/* =========================================
   IMAGES
========================================= */

img{

    max-width:100%;

    height:auto;

    display:block;

}


/* =========================================
   ABBR
========================================= */

abbr{

    cursor:help;

    text-decoration:dotted underline;

}


/* =========================================
   KEYBOARD
========================================= */

kbd{

    padding:.2rem .45rem;

    border-radius:5px;

    background:#222;

    color:#fff;

    font-size:.85rem;

    font-family:monospace;

}
/* =========================================
   FORM TYPOGRAPHY
========================================= */

label{

    display:inline-block;

    margin-bottom:.5rem;

    font-weight:600;

    color:var(--text-color);

}

input,
textarea,
select{

    font-family:inherit;

    font-size:1rem;

    font-weight:400;

    line-height:1.5;

    color:var(--text-color);

}

input::placeholder,
textarea::placeholder{

    color:var(--text-light);

    opacity:.8;

}


/* =========================================
   BUTTON TYPOGRAPHY
========================================= */

button{

    font-family:inherit;

    font-size:1rem;

    font-weight:600;

    line-height:1.2;

}


/* =========================================
   TABLE TYPOGRAPHY
========================================= */

table{

    width:100%;

    border-collapse:collapse;

}

th{

    font-weight:700;

    text-align:left;

    color:var(--text-color);

}

td{

    color:var(--text-light);

}

th,
td{

    padding:.85rem;

}


/* =========================================
   CAPTION
========================================= */

caption{

    margin-bottom:1rem;

    font-weight:600;

    color:var(--text-light);

}


/* =========================================
   FIGURE
========================================= */

figure{

    margin:0;

}

figcaption{

    margin-top:.75rem;

    font-size:.9rem;

    color:var(--text-light);

    text-align:center;

}


/* =========================================
   ADDRESS
========================================= */

address{

    font-style:normal;

    line-height:1.8;

    color:var(--text-light);

}


/* =========================================
   PRINT
========================================= */

@media print{

    body{

        color:#000;

        background:#fff;

    }

    a{

        color:#000;

        text-decoration:underline;

    }

}
/* =========================================
   TYPOGRAPHY HELPERS
========================================= */

.text-uppercase{

    text-transform:uppercase;

}

.text-lowercase{

    text-transform:lowercase;

}

.text-capitalize{

    text-transform:capitalize;

}

.fw-light{

    font-weight:300;

}

.fw-normal{

    font-weight:400;

}

.fw-medium{

    font-weight:500;

}

.fw-semibold{

    font-weight:600;

}

.fw-bold{

    font-weight:700;

}

.fs-small{

    font-size:.875rem;

}

.fs-normal{

    font-size:1rem;

}

.fs-large{

    font-size:1.125rem;

}

.lh-1{

    line-height:1;

}

.lh-normal{

    line-height:1.5;

}

.lh-relaxed{

    line-height:1.8;

}


/* =========================================
   TEXT TRUNCATE
========================================= */

.text-truncate{

    overflow:hidden;

    white-space:nowrap;

    text-overflow:ellipsis;

}


/* =========================================
   ACCESSIBILITY
========================================= */

:focus-visible{

    outline:2px solid var(--primary-color);

    outline-offset:3px;

}

html{

    -webkit-text-size-adjust:100%;

    text-rendering:optimizeLegibility;

}


/* =========================================
   END OF TYPOGRAPHY
========================================= */