/* =========================================================
   GENERIC GLOBAL WEBSITE THEME
   Green / Modern / Clean
   ========================================================= */

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


/* =========================================================
   GLOBAL RESET
   ========================================================= */

html {
    scroll-behavior: smooth;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    background: #f4f8f5;
    color: #26332a;
    font-family: 'Inter', Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

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

a {
    color: #247346;
    text-decoration: none;
    transition: all 0.25s ease;
}

a:hover {
    color: #165832;
}

::selection {
    background: #2e7746;
    color: #ffffff;
}


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

.wrap {
    width: calc(100% - 40px);
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
}


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

.header {
    position: relative;
    z-index: 100;
    background: #ffffff;
    border-bottom: 1px solid rgba(34, 91, 54, 0.10);
    box-shadow: 0 4px 18px rgba(30, 70, 45, 0.06);
}

.header .wrap {
    min-height: 125px;
    display: flex;
    align-items: center;
}


/* =========================================================
   HEADER REGION
   ========================================================= */

/*
   The header currently contains:

   1. Society information module
   2. Logo module

   We explicitly arrange them as:

   LOGO     SOCIETY INFORMATION
*/

.region-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 45px;
}


/* Remove generic module spacing in header */

.region-header .fModule {
    margin: 0;
}


/* =========================================================
   SOCIETY INFORMATION
   ========================================================= */

/*
   This targets the pages-custom module containing:

   GREEN FIELDS 'B' CO-OP. HOUSING SOCIETY LTD.
   Jogeshwari Vikhroli Link Road...
   Regn...
   Tel / Email...
*/

.region-header > .f-module-pages-custom {
    order: 2;
    flex: 1 1 auto;
    min-width: 0;
    text-align: right;
}


/* Remove default paragraph spacing */

.region-header > .f-module-pages-custom p {
    margin: 0;
    padding: 0;
    color: #526158;
    line-height: 1.45;
}


/*
   Society name
*/

.region-header > .f-module-pages-custom p:first-child {
    margin-bottom: 4px;
    color: #263d2d;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.2px;
}


/*
   Address
*/

.region-header > .f-module-pages-custom p:nth-child(2) {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
}


/*
   Registration number
*/

.region-header > .f-module-pages-custom p:nth-child(3) {
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.5;
}


/*
   Telephone / Email
*/

.region-header > .f-module-pages-custom p:nth-child(4) {
    margin-top: 3px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
}


/*
   Empty fifth paragraph in the HTML should not take
   unnecessary space.
*/

.region-header > .f-module-pages-custom p:nth-child(5) {
    display: none;
}


/* =========================================================
   HEADER LOGO
   ========================================================= */

.header-logo {
    order: 1;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.header-logo .f-module-content,
.header-logo .fModuleContent {
    display: flex;
    align-items: center;
}

.header-logo ul,
.header-logo ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.header-logo li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.header-logo img {
    display: block;
    width: auto;
    max-width: 300px;
    max-height: 82px;
    object-fit: contain;
}


/* =========================================================
   PAGE TITLE
   ========================================================= */

.page-title {
    position: relative;
    overflow: hidden;
    background: linear-gradient(
        135deg,
        #174d2c 0%,
        #216b3d 50%,
        #2d804c 100%
    );
    color: #ffffff;
}


/* Decorative circles */

.page-title::before {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    right: -100px;
    top: -150px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    pointer-events: none;
}

.page-title::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    left: -80px;
    bottom: -120px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    pointer-events: none;
}

.page-title .wrap {
    position: relative;
    z-index: 2;
    padding: 34px 0 36px;
}


/*
   Page title is always centered.
*/

.page-title h1 {
    width: 100%;
    margin: 0;
    color: #ffffff;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 38px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.5px;
    text-align: center;
}


/* =========================================================
   PAGE MESSAGE
   ========================================================= */

.page-message {
    background: transparent;
}

.page-message .wrap {
    padding-top: 0;
    padding-bottom: 0;
}

#f-messages {
    margin: 0;
}


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

.body {
    min-height: 500px;
    padding: 55px 0 70px;
    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(57, 132, 82, 0.05),
            transparent 28%
        ),
        #f4f8f5;
}


/* =========================================================
   GENERIC CONTENT REGION
   ========================================================= */

.fRegion {
    margin: 0;
}


/* =========================================================
   GENERIC CONTENT MODULES
   ========================================================= */

.body .fModule {
    margin-bottom: 25px;
}

.body .fModule:last-child {
    margin-bottom: 0;
}

.body .fModuleContent {
    width: 100%;
}


/* =========================================================
   CONTENT CARDS
   ========================================================= */

.body .fModule {
    background: #ffffff;
    border: 1px solid rgba(32, 91, 52, 0.08);
    border-radius: 18px;
    box-shadow:
        0 10px 30px rgba(25, 66, 40, 0.07),
        0 2px 6px rgba(25, 66, 40, 0.03);
    padding: 42px 48px;
}


/*
   Nested modules should not create cards inside cards.
*/

.body .fModule .fModule {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}


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

.body h1,
.body h2,
.body h3,
.body h4,
.body h5,
.body h6 {
    color: #263d2d;
    font-weight: 700;
    line-height: 1.35;
}

.body h1 {
    margin: 0 0 24px;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 36px;
}

.body h2 {
    margin: 0 0 22px;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 30px;
}

.body h3 {
    position: relative;
    margin: 0 0 20px;
    padding-left: 18px;
    color: #185a32;
    font-size: 25px;
}

.body h4 {
    margin: 0 0 16px;
    color: #23663a;
    font-size: 20px;
}

.body h5 {
    margin: 0 0 14px;
    color: #285c3b;
    font-size: 17px;
}

.body h6 {
    margin: 0 0 12px;
    color: #285c3b;
    font-size: 15px;
}


/* Green accent beside H3 */

.body h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 4px;
    border-radius: 4px;
    background: #4b9a63;
}


/* =========================================================
   PARAGRAPHS
   ========================================================= */

.body p {
    margin: 0 0 20px;
    color: #526158;
    font-size: 16px;
    line-height: 1.8;
}

.body p:last-child {
    margin-bottom: 0;
}

.body strong,
.body b {
    color: #263d2d;
    font-weight: 700;
}


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

.body ul,
.body ol {
    margin-top: 0;
    margin-bottom: 25px;
}

.body ul {
    padding-left: 25px;
}

.body ol {
    padding-left: 30px;
}

.body li {
    margin-bottom: 8px;
    color: #526158;
}

.body li:last-child {
    margin-bottom: 0;
}


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

.body a {
    color: #277040;
    font-weight: 500;
}

.body a:hover {
    color: #165832;
    text-decoration: underline;
}


/* =========================================================
   TABLES
   ========================================================= */

.body table {
    width: 100%;
    margin: 25px 0;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #dcecdf;
    border-radius: 12px;
}

.body th {
    padding: 14px 16px;
    background: #edf7ef;
    color: #205c35;
    font-size: 13px;
    font-weight: 700;
    text-align: left;
    border-bottom: 1px solid #d7e8da;
}

.body td {
    padding: 14px 16px;
    color: #526158;
    border-bottom: 1px solid #e8eee9;
}

.body tr:last-child td {
    border-bottom: 0;
}

.body tr:hover td {
    background: #f8fbf9;
}


/* =========================================================
   FORMS
   ========================================================= */

.body .fForm {
    width: 100%;
}


/*
   Consistent spacing between all form items.
*/

.body .form-item {
    width: 100%;
    margin: 0 0 24px;
}


/*
   Labels are always left aligned and occupy the full
   available width.
*/

.body .form-item label,
.body label {
    display: block;
    width: 100%;
    margin: 0 0 8px;
    padding: 0;
    color: #34483a;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    text-align: left;
}


/*
   Form controls
*/

.body input,
.body select,
.body textarea {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 12px 14px;
    border: 1px solid #d5e0d8;
    border-radius: 8px;
    background: #ffffff;
    color: #34483a;
    font-family: 'Inter', Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    outline: none;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.body input:hover,
.body select:hover,
.body textarea:hover {
    border-color: #b9cebe;
}

.body input:focus,
.body select:focus,
.body textarea:focus {
    border-color: #4b9a63;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(75, 154, 99, 0.10);
}


/* =========================================================
   SELECT
   ========================================================= */

.body select {
    min-height: 48px;
    cursor: pointer;
}


/* =========================================================
   TEXTAREA
   ========================================================= */

.body textarea {
    min-height: 130px;
    resize: vertical;
}


/* =========================================================
   CHECKBOXES / RADIO BUTTONS
   ========================================================= */

.body input[type="checkbox"],
.body input[type="radio"] {
    display: inline-block;
    width: auto;
    max-width: none;
    margin-right: 7px;
    accent-color: #34774a;
}

.body label input[type="checkbox"],
.body label input[type="radio"] {
    display: inline-block;
    width: auto;
    margin-top: 0;
}


/* =========================================================
   BUTTON AREA
   ========================================================= */

.body .form-item.buttons,
.body .fForm .buttons {
    margin-top: 8px;
    margin-bottom: 0;
    padding-top: 2px;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.body button,
.body input[type="submit"],
.body input[type="button"],
.body input[type="reset"],
.body .button,
.body .btn {
    display: inline-block;
    width: auto;
    padding: 11px 22px;
    border: 0;
    border-radius: 8px;
    background: #34774a;
    color: #ffffff;
    font-family: 'Inter', Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    cursor: pointer;
    text-decoration: none;
    transition:
        background 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.body button:hover,
.body input[type="submit"]:hover,
.body input[type="button"]:hover,
.body input[type="reset"]:hover,
.body .button:hover,
.body .btn:hover {
    background: #23663a;
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(35, 102, 58, 0.20);
}


/* =========================================================
   SECONDARY BUTTON
   ========================================================= */

.body .btn-secondary,
.body button.secondary,
.body .button.secondary {
    background: #edf7ef;
    color: #28663c;
    border: 1px solid #d4e8d8;
}

.body .btn-secondary:hover,
.body button.secondary:hover,
.body .button.secondary:hover {
    background: #dcefe0;
    color: #185a32;
}


/* =========================================================
   ALERTS / NOTICES
   ========================================================= */

.body .alert,
.body .message,
.body .notice,
.body .warning,
.body .success,
.body .error {
    margin: 20px 0;
    padding: 16px 20px;
    border-radius: 10px;
}


/* Success */

.body .success {
    background: #edf7ef;
    border: 1px solid #cfe5d3;
    color: #28663c;
}


/* Warning */

.body .warning {
    background: #fff8e8;
    border: 1px solid #f2dfae;
    color: #735817;
}


/* Error */

.body .error {
    background: #fff0ef;
    border: 1px solid #efd0cc;
    color: #8a332c;
}


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

.body blockquote {
    margin: 25px 0;
    padding: 20px 24px;
    border-left: 4px solid #4b9a63;
    border-radius: 0 10px 10px 0;
    background: #f0f8f2;
    color: #526158;
}


/* =========================================================
   HORIZONTAL RULE
   ========================================================= */

.body hr {
    height: 1px;
    margin: 30px 0;
    border: 0;
    background: #dfe9e2;
}


/* =========================================================
   GENERIC CONTENT HIGHLIGHT
   ========================================================= */

.body .highlight,
.body .info-box,
.body .content-box {
    padding: 22px 25px;
    margin: 25px 0;
    border: 1px solid #dcecdf;
    border-radius: 12px;
    background: linear-gradient(
        135deg,
        #f0f8f2,
        #f7fbf8
    );
}


/* =========================================================
   FOOTER
   ========================================================= */

.footer {
    position: relative;
    background: #123a22;
    color: rgba(255,255,255,0.75);
    border-top: 4px solid #4c9861;
}

.footer .wrap {
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
    text-align: center;
}

.footer p {
    margin: 0;
    color: rgba(255,255,255,0.72);
    font-size: 13px;
    line-height: 1.6;
}

.footer a {
    color: #b9d8c0;
}

.footer a:hover {
    color: #ffffff;
}


/* =========================================================
   GALLERY
   ========================================================= */

.body .fGalleryImages,
.body .fGalleryList {
    margin: 0;
    padding: 0;
}

.body .fGalleryItem {
    list-style: none;
}

.body .fGalleryItem img {
    display: block;
    border-radius: 10px;
}


/* =========================================================
   PAGINATION
   ========================================================= */

.body .pagination,
.body .pager {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 25px 0;
    padding: 0;
    list-style: none;
}

.body .pagination a,
.body .pager a {
    display: inline-block;
    padding: 7px 12px;
    border: 1px solid #d8e5db;
    border-radius: 7px;
    background: #ffffff;
    color: #34774a;
    text-decoration: none;
}

.body .pagination a:hover,
.body .pager a:hover {
    background: #edf7ef;
}


/* =========================================================
   UTILITY STYLES
   ========================================================= */

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

.text-left {
    text-align: left;
}

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


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

@media (max-width: 767px) {

    .wrap {
        width: calc(100% - 28px);
    }


    /* -----------------------------------------------------
       HEADER
       ----------------------------------------------------- */

    .header .wrap {
        min-height: 0;
        padding: 18px 0;
    }

    .region-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 15px;
    }

    .header-logo {
        order: 1;
        width: 100%;
        justify-content: center;
    }

    .header-logo img {
        max-width: 240px;
        max-height: 62px;
        margin: 0 auto;
    }

    .region-header > .f-module-pages-custom {
        order: 2;
        width: 100%;
        text-align: center;
    }

    .region-header > .f-module-pages-custom p {
        text-align: center;
    }

    .region-header > .f-module-pages-custom p:first-child {
        font-size: 22px;
        line-height: 1.25;
    }

    .region-header > .f-module-pages-custom p:nth-child(2) {
        font-size: 13px;
    }

    .region-header > .f-module-pages-custom p:nth-child(3) {
        font-size: 11px;
    }

    .region-header > .f-module-pages-custom p:nth-child(4) {
        font-size: 12px;
    }


    /* -----------------------------------------------------
       PAGE TITLE
       ----------------------------------------------------- */

    .page-title .wrap {
        padding: 25px 0 27px;
    }

    .page-title h1 {
        font-size: 30px;
        line-height: 1.25;
        text-align: center;
    }


    /* -----------------------------------------------------
       BODY
       ----------------------------------------------------- */

    .body {
        padding: 28px 0 45px;
    }


    /* -----------------------------------------------------
       CONTENT
       ----------------------------------------------------- */

    .body .fModule {
        padding: 30px 22px;
        border-radius: 14px;
    }


    /* -----------------------------------------------------
       TYPOGRAPHY
       ----------------------------------------------------- */

    .body h1 {
        font-size: 29px;
    }

    .body h2 {
        font-size: 25px;
    }

    .body h3 {
        font-size: 21px;
    }

    .body h4 {
        font-size: 18px;
    }

    .body p {
        font-size: 15px;
        line-height: 1.75;
    }


    /* -----------------------------------------------------
       FORM
       ----------------------------------------------------- */

    .body .form-item {
        margin-bottom: 20px;
    }

    .body .form-item label,
    .body label {
        margin-bottom: 7px;
        font-size: 14px;
        line-height: 1.5;
        text-align: left;
    }

    .body input,
    .body select,
    .body textarea {
        font-size: 16px;
        padding: 12px 13px;
    }

    .body select {
        min-height: 48px;
    }

    .body textarea {
        min-height: 120px;
    }


    /* -----------------------------------------------------
       TABLES
       ----------------------------------------------------- */

    .body table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }


    /* -----------------------------------------------------
       BUTTONS
       ----------------------------------------------------- */

    .body button,
    .body input[type="submit"],
    .body input[type="button"],
    .body input[type="reset"],
    .body .button,
    .body .btn {
        padding: 11px 18px;
    }


    /* -----------------------------------------------------
       FOOTER
       ----------------------------------------------------- */

    .footer .wrap {
        min-height: 90px;
        padding: 20px 10px;
    }

    .footer p {
        font-size: 12px;
    }
}


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

@media (max-width: 420px) {

    .wrap {
        width: calc(100% - 20px);
    }


    /* -----------------------------------------------------
       HEADER
       ----------------------------------------------------- */

    .header .wrap {
        min-height: 0;
        padding: 15px 0;
    }

    .region-header {
        gap: 12px;
    }

    .header-logo img {
        max-width: 210px;
        max-height: 55px;
    }

    .region-header > .f-module-pages-custom p:first-child {
        font-size: 20px;
    }

    .region-header > .f-module-pages-custom p:nth-child(2) {
        font-size: 12px;
    }

    .region-header > .f-module-pages-custom p:nth-child(3) {
        font-size: 10px;
    }

    .region-header > .f-module-pages-custom p:nth-child(4) {
        font-size: 11px;
    }


    /* -----------------------------------------------------
       PAGE TITLE
       ----------------------------------------------------- */

    .page-title .wrap {
        padding: 22px 0 24px;
    }

    .page-title h1 {
        font-size: 27px;
        line-height: 1.25;
        text-align: center;
    }


    /* -----------------------------------------------------
       BODY
       ----------------------------------------------------- */

    .body {
        padding: 22px 0 35px;
    }

    .body .fModule {
        padding: 24px 18px;
        border-radius: 12px;
    }


    /* -----------------------------------------------------
       TYPOGRAPHY
       ----------------------------------------------------- */

    .body h1 {
        font-size: 26px;
    }

    .body h2 {
        font-size: 23px;
    }

    .body h3 {
        font-size: 20px;
    }


    /* -----------------------------------------------------
       FORM
       ----------------------------------------------------- */

    .body .form-item {
        margin-bottom: 18px;
    }

    .body .form-item label,
    .body label {
        margin-bottom: 7px;
        font-size: 13px;
    }

    .body input,
    .body select,
    .body textarea {
        font-size: 16px;
    }

    .body .form-item.buttons {
        margin-top: 8px;
    }
}


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (min-width: 1200px) {

    .body .fModule {
        padding: 48px 55px;
    }

    .page-title h1 {
        font-size: 40px;
        text-align: center;
    }


    /*
       Give the society name a little more presence
       on larger screens.
    */

    .region-header > .f-module-pages-custom p:first-child {
        font-size: 30px;
    }
}