body {
    font-family: 'creato display', 'poppins', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

p {
    font-size: 110%;
}

@media (max-width : 423px) {
    p {
        font-size: 100%;
    }
}

*::selection {
    background-color: gold;
}

nav {
    background-color : black;
}

.navbar-nav .nav-link {
    color : white;
}

.navbar-nav .nav-link:hover {
    color : gold;
}

.navbar-brand .logo-title{
    font-weight: 700;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.navbar-brand i {
    font-size : 30px;
}

/* here is the First div */

.first-text {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.state-contents-div {
    width : 75%;
    text-align : start;
    border-radius : 0.6rem;
    color : white;
    box-shadow : 2px 2px 20px black;
}

.state-card-header {
    background-color: black;
    height : 3rem;
    display : flex;
    align-items : center;
    border-radius : 0.6rem 0.6rem 0 0;
}

@media (max-width : 446px) {
    .state-card-header {
        height : 4rem;
    }
}

.state-card-body span {
    font-weight : 600;
}

.state-card-header h4 {
    margin-left : 1rem;
}

@media (max-width : 400px) {
    .state-card-header h4 {
        margin-top : 0.5rem;
        text-align: center;
        margin-left : 0;
    }
}

@media (min-width : 377px), (max-width : 400px) {
    .state-card-header h4 {
        margin-left : 0.5rem;
    }
}

.state-card-body {
    padding : 1rem;
}

.state-points p {
    line-height : 1.2rem;
}

.container-div {
    height : 80%;
    display : flex;
    flex-direction : column;
    align-items: center;
    text-align: center;
    color : black;
}

/* here it ends */

.cards-div {
    margin-top : 2rem;
}

.cards-div .card {
    color : white;
    transition: 0.2s ease-in ;
    margin : 2.5rem;
    box-shadow : 2px 2px 20px black;
    border : none;
    height : 90%;
}

.cards-div .card:hover {
    box-shadow : 2px 2px 20px gold;
    transform: translateY(-6px);
}

.mla-card-body {
    color : white;
    position: relative;
    top : 1rem;
    padding : 1rem;
}

.mla-card-title {
    position: relative;
    bottom : 15px;
}

.mla-card-text {
    position: relative;
    bottom : 20px;
}

.mla-card-header {
    background-color: black;
    border-radius : 0.6rem 0.6rem 0 0;
    height : 4rem;
}

/* here the first 2 divs cards ends */

.leg-types {
    padding-left : 2rem;
    padding-right : 2rem;
}

.leg-types .leg-types-para span {
    font-weight : 700;
}

.card-header {
    background-color: gold;
    border : none;
}

.card {
    border : 2px solid gold;
    border-radius : 0.6rem;
    margin : 2rem;
}

.first-cards {
    transition: 0.2s ease-in;
}

.first-cards:hover {
    box-shadow : 2px 2px 10px black;
}

.heading-div {
    margin-top : 2rem;
    margin-bottom : 2rem;
}

.cards-div {
    position: relative;
    bottom : 2rem;
}

.contents-div {
    width : 75%;
    text-align : start;
    border-radius : 0.6rem;
    color : white;
    box-shadow : 2px 2px 20px black;
    margin-top : 1rem;
}

.content-card-header {
    background-color: black;
    height : 3rem;
    display : flex;
    align-items : center;
    border-radius : 0.6rem 0.6rem 0 0;
}

@media (max-width : 642px) {
    .content-card-header {
        height : 4rem;
    }
}

.content-card-body span {
    font-weight : 600;
}

.content-card-header h4 {
    margin-left : 1rem;
}

.content-card-body {
    padding : 0.6rem;
    padding : 1rem;
}

.card-points p {
    line-height : 1.2rem;
}

.container-div {
    height : 80%;
    display : flex;
    flex-direction : column;
    align-items: center;
    text-align: center;
    color : black;
}

.para-points {
    color : gold;
}

.grampanchayat-div {
    margin : 2rem;
    border : 2px solid gold;
    border-radius : 0.6rem;
}

.grampanchayat-div-body {
    padding : 0.6rem;
}

.grampanchayat-div h2 {
    padding-left: 0.6rem;
}

.grampnchayat-div-header {
    height : 3rem;
    background-color: gold;
}

@media (min-width : 401px) and (max-width : 630px) {
    .grampnchayat-div-header {
    height : 4.3rem;
    }
}

@media (max-width : 400px) {
    .grampnchayat-div-header {
        height : 6rem;
    }
}

.grampanchayat-div-body span {
    font-weight : 800;
}

.grampanchayat-div img {
    border-radius : 0 0 0.5rem 0.5rem;
}

.gram-img-div {
    padding : 1rem;
}

.gram-img-div img {
    border : 0.5rem solid gold;
    border-radius : 1rem;
    width : 100%;
    margin-top : 1rem;
}

@media (max-width : 991px) {
    .gram-img-div img {
        width : 80%;
    }
}

@media (max-width : 436px) {
    .gram-img-div img {
        width : 100%;
    }
}

.term-div {
    margin-top : 2rem;
}

.term-div-1 span {
    font-weight : 800;
}

/* it starts here */

.president-div {
    width : 75%;
    text-align : start;
    border-radius : 0.6rem;
    color : white;
    box-shadow : 2px 2px 20px black;
    margin-top : 1rem;
    transition: 0.2s ease-in;
}

.president-div:hover {
    box-shadow : 2px 2px 20px gold;
}

.president-card-header {
    background-color: black;
    height : 3rem;
    display : flex;
    align-items : center;
    border-radius : 0.6rem 0.6rem 0 0;
}

@media (max-width : 642px) {
    .president-card-header {
        height : 4rem;
    }
}

.president-card-body span {
    font-weight : 600;
}

.president-card-header h4 {
    margin-left : 1rem;
}

.president-card-body {
    padding : 0.6rem;
    padding : 1rem;
}

.president-card-points p {
    line-height : 1.2rem;
}

.president-points {
    color : gold;
}

/* it ends here */

.images-hr {
    position: relative;
    top : 2rem;
}

.responsibilities-div {
    margin-top : 4rem;
}

.responsible-cards-div {
    padding : 2rem;
    position: relative;
    bottom : 5rem;
}

.responsibilities-div span, .eligibility-div .bold-span, .panchayati-raj-intro-div span {
    font-weight : 600;
}

.responsible-hr {
    position: relative;
    bottom : 2rem;
}

.rural-div {
    border-radius : 0.6rem;
    color : white;
    box-shadow : 2px 2px 20px black;
    margin : 0.6rem;
    margin-top : 2rem;
}

.rural-card-header {
    background-color: black;
    border-radius : 0.6rem 0.6rem 0 0;
    height : 3rem;
    display : flex;
    align-items : center;
}

@media (max-width : 466px) {
    .state-salary {
        height : 5rem;
    }
}

.rural-card-header h3 {
    margin-left : 1rem;
}

.rural-card-body {
    padding : 0.5rem;
}

.rural-para {
    list-style-type : none;
}

.eligible-div {
    width : 75%;
    text-align : start;
    border : 2px solid gold;
    border-radius : 0.6rem;
}

.eligible-card-header {
    background-color: gold;
    height : 3rem;
    display : flex;
    align-items : center;
}

.eligible-card-body span {
    font-weight : 600;
}

.eligible-card-header h4 {
    margin-left : 0.6rem;
}

.eligible-card-body {
    padding : 0.6rem;
}

.eligible-points p {
    line-height : 1.2rem;
}

@media (max-width : 515px) {
    .eligible-card-header {
        height : 4rem;
    }
}

.term-para {
    list-style-type: none;
}

.term-para-1 {
    width : auto;
}

.budget-div {
    position: relative;
    bottom : 2rem;
    background-color: green;
}

.budget-header {
    background-color: rgb(0, 75, 0);
}

.budget-div-1 {
    margin-top : 3rem;
}

.container span {
    font-weight: 800;
}

.budget-spent-div {
    margin-top : 4rem;
}

.salary-hr {
    position: relative;
    bottom : 4rem;
}

.budget-main-div {
    position: relative;
    bottom : 5rem;
}

.summary-div {
    margin-top : 3rem;
    background-color: rgb(177, 0, 0);
}

.summary-div .summary-header {
    background-color: rgb(177, 0, 0);
    border-bottom: 1px solid black;
}

.ut-div {
    position : relative;
    bottom : 3rem;
    font-size : 0.8rem;
}

.feedback {
    margin-bottom : 2.5rem;
}

.feedback a {
    font-size: 1.2rem;
    font-family: 'creato display', 'poppins', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-weight: 500;
}

.feedback p {
    font-family: 'creato display', 'poppins', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 1.3rem;
    font-weight: 500;
}

footer {
    height : 120%;
    background-color: black;
    color : white;
    padding : 1rem;
    margin : 0;
    font-family: 'poppins';
}

footer .brand-name-para {
    color : gold;
}

@media (max-width : 540px) {
    .footer-first {
    font-size: 0.9rem;
}
    footer .brand-name-para {
    color : gold;
    font-size : 0.9rem;
}
}

footer .disclaimer-para, .source-para, .copyright-para {
    font-size : 0.8rem;
}

footer .source-para {
    color : rgb(183, 183, 183);
}

footer .creator-para, .year-para {
    color : rgb(183, 183, 183);
}