/* =========================================
   GENERAL
========================================= */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: #f4f7fb;
    color: #222;
    font-family: Arial, Helvetica, sans-serif;
}


/* =========================================
   MAIN WRAPPER
========================================= */

.main-wrapper {
    max-width: 1320px;
    margin: auto;
    padding: 18px 15px 60px;
}


/* =========================================
   VILLAGE TITLE
========================================= */

.village-title {
    background: linear-gradient(
        90deg,
        #8bc34a,
        #dceecb
    );

    color: #28752e;

    font-size: 17px;
    font-weight: 700;

    padding: 7px 10px;

    border-radius: 3px;

    margin-bottom: 24px;
}


/* =========================================
   VILLAGE CARDS
========================================= */

.village-card {

    height: 126px;

    background: #ffffff;

    border: 1px solid #dce1e5;

    border-radius: 6px;

    box-shadow:
        0 2px 5px rgba(0, 0, 0, 0.08);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: all 0.3s ease;
}


.village-card:hover {

    transform: translateY(-4px);

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.12);

}


/* =========================================
   ICON
========================================= */

.village-icon {

    font-size: 42px;

    height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 5px;
}


.history-icon {
    color: #1254a4;
}

.culture-icon {
    color: #2c8238;
}

.places-icon {
    color: #258239;
}

.community-icon {
    color: #237d38;
}


/* =========================================
   CARD TITLE
========================================= */

.village-card h5 {

    margin: 0;

    font-size: 15px;

    font-weight: 700;

    color: #222;
}


/* =========================================
   SECTION BOX
========================================= */

.section-box {

    background: #ffffff;

    border: 1px solid #d3d8dc;

    min-height: 198px;
}


/* =========================================
   SECTION HEADING
========================================= */

.section-heading {

    min-height: 58px;

    background: linear-gradient(
        90deg,
        #8bc38b,
        #8bc34a
    );

    border-bottom: 1px solid #d7d7d7;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 8px 12px;

    font-size: 28px;

    color: #222;

    line-height: 1.2;
}


.heading-icon {

    width: 42px;

    height: 42px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    font-size: 25px;
}


/* =========================================
   SECTION CONTENT
========================================= */

.section-content {

    margin: 22px 0 12px;

    padding: 10px 25px;

    background: #ffffff;

}


/* =========================================
   MENU ITEMS
========================================= */

.menu-item {

    display: flex;

    align-items: center;

    gap: 7px;

    text-decoration: none;

    color: #292929;

    font-size: 13px;

    font-weight: 700;

    padding: 8px 0;

    transition: color 0.2s ease;
}


.menu-item span {

    color: #399644;

    font-size: 15px;
}


.menu-item:hover {

    color: #238438;

}


/* =========================================
   JOB SECTION
========================================= */

.job-box {

    overflow: hidden;

}


.job-content {

    padding: 15px;

    min-height: 137px;

    background: #f8faf9;
}


/* =========================================
   JOB SLIDER
========================================= */

.job-slider {

    display: flex;

    gap: 14px;

    overflow-x: auto;

    scrollbar-width: none;

    padding: 2px 0 8px;
}


.job-slider::-webkit-scrollbar {

    display: none;
}


/* =========================================
   JOB CARD
========================================= */

.job-card {

    flex: 0 0 auto;

    min-width: 260px;

    background: white;

    border-radius: 7px;

    padding: 12px 14px;

    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.06);

    display: flex;

    align-items: center;

    gap: 8px;
}


.job-card a {

    text-decoration: none;

    color: #1465e5;

    font-size: 14px;

    font-weight: 700;

    white-space: nowrap;
}


.job-card a:hover {

    text-decoration: underline;

}


.job-icon {

    font-size: 20px;

}


/* =========================================
   VIEW JOB BUTTON
========================================= */

.view-jobs-btn {

    border-radius: 5px;

    padding: 6px 12px;

    font-size: 14px;
}


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

@media (max-width: 991px) {

    .section-heading {

        font-size: 24px;

    }

}


@media (max-width: 575px) {

    .main-wrapper {

        padding: 12px 10px 40px;

    }


    .village-title {

        font-size: 16px;

    }


    .village-card {

        height: 115px;

    }


    .village-icon {

        font-size: 36px;

    }


    .section-heading {

        font-size: 21px;

        min-height: 52px;

    }


    .heading-icon {

        width: 36px;

        height: 36px;

        font-size: 21px;

    }


    .section-content {

        padding: 8px 15px;

    }


    .menu-item {

        font-size: 12px;

    }


    .job-card {

        min-width: 230px;

    }

}