/* =========================================================
   RURAL DEVELOPMENT - COMPLETE FIX
   ========================================================= */

/* Fixed navbar ke neeche proper space */
#rural-development {
    position: relative;
    width: 100%;
    overflow: hidden;
    isolation: isolate;
    padding-top: 140px;
    padding-bottom: 80px;
}

/* =========================================================
   IMPORTANT RESET
   Purane project CSS ke conflict ko remove karega
   ========================================================= */

#rural-development .project-header,
#rural-development .project-card {
    display: block;
    width: auto;
    height: auto;
}

#rural-development .project-card h2,
#rural-development .project-card h3,
#rural-development .project-card h4,
#rural-development .project-card h5,
#rural-development .project-card p,
#rural-development .project-card span {
    position: static;
}

/* Paragraph ko normal block mein rakho */
#rural-development p {
    display: block;
    width: 100%;
    max-width: none;
}

/* =========================================================
   HEADER FIX
   ========================================================= */

#rural-development .project-header {
    width: 100%;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

#rural-development .project-header h1 {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* =========================================================
   PROJECT CARDS
   ========================================================= */

#rural-development .project-card {
    min-width: 0;
}

/* Left About Card */
#rural-development .project-card:first-child {
    display: block !important;
}

/* Isse title aur paragraph ek dusre ke side mein nahi jayenge */
#rural-development .project-card:first-child > * {
    display: block;
}

/* Button ko inline-flex rehne do */
#rural-development .project-card:first-child > button {
    display: inline-flex;
}

/* Focus Card */
#rural-development .project-card:last-child {
    display: block !important;
}

/* Focus list */
#rural-development .project-card ul {
    display: block;
    width: 100%;
    padding: 0;
    margin-bottom: 0;
}

#rural-development .project-card li {
    display: flex;
    width: 100%;
}

/* =========================================================
   TEXT FIX
   ========================================================= */

#rural-development h1,
#rural-development h2,
#rural-development h3,
#rural-development h4,
#rural-development h5,
#rural-development p,
#rural-development span {
    word-break: normal;
    overflow-wrap: break-word;
}

/* Hindi text proper width */
#rural-development .project-card p {
    width: 100%;
    max-width: 100%;
}

/* =========================================================
   HOVER EFFECT
   ========================================================= */

#rural-development .project-card {
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

/* =========================================================
   MODAL
   ========================================================= */

#ruralProjectModal {
    opacity: 0;
    overflow-x: hidden;
    transition: opacity 0.25s ease;
}

#ruralProjectModal.modal-visible {
    opacity: 1;
}

#ruralProjectModalBox {
    transform: translateY(20px) scale(0.97);
    opacity: 0;

    transition:
        transform 0.25s ease,
        opacity 0.25s ease;
}

#ruralProjectModal.modal-visible #ruralProjectModalBox {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* Modal scrollbar */

#ruralProjectModalBox > div:last-child {
    scrollbar-width: thin;
    scrollbar-color: #10b981 #f1f5f9;
}

#ruralProjectModalBox > div:last-child::-webkit-scrollbar {
    width: 6px;
}

#ruralProjectModalBox > div:last-child::-webkit-scrollbar-track {
    background: #f1f5f9;
}

#ruralProjectModalBox > div:last-child::-webkit-scrollbar-thumb {
    background: #10b981;
    border-radius: 20px;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

    #rural-development {
        padding-top: 125px;
        padding-bottom: 64px;
    }

}

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

@media (max-width: 640px) {

    #rural-development {
        padding-top: 105px;
        padding-bottom: 50px;
    }

    #rural-development .project-card {
        width: 100%;
    }

    #ruralProjectModalBox {
        max-height: 94vh;
        border-radius: 16px;
    }

}

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

@media (max-width: 380px) {

    #rural-development {
        padding-top: 95px;
    }

    #ruralProjectModal {
        padding: 8px;
    }

    #ruralProjectModalBox {
        max-height: 96vh;
    }

}