.elementor-637 .elementor-element.elementor-element-330421e{--display:flex;}.elementor-637 .elementor-element.elementor-element-0d16510{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}body.elementor-page-637:not(.elementor-motion-effects-element-type-background), body.elementor-page-637 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://wildhcon.com/wp-content/uploads/2026/09/shifaaz-shamoon-sLAk1guBG90-unsplash-scaled.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}:root{--page-title-display:none;}@media(min-width:1367px){body.elementor-page-637:not(.elementor-motion-effects-element-type-background), body.elementor-page-637 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-attachment:fixed;}}/* Start custom CSS for shortcode, class: .elementor-element-deca9c7 *//* ========================================================
   ULTIMATE MEMBER DIRECTORY (GRID & LIST VIEW SAFE)
   Font: Titillium Web
======================================================== */

@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@400;600;700&display=swap');

/* 1. Global Base Card Styles (Applies to both Grid and List) */
.um-directory .um-members-wrapper .um-member {
    background-color: #ffffff !important;
    border-radius: 16px !important;
    border: none !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
    font-family: 'Titillium Web', sans-serif !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    overflow: hidden !important; 
}

.um-directory .um-members-wrapper .um-member:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 40px rgba(0,0,0,0.25) !important;
}

.um-directory .um-member-name a {
    color: #1a1a1a !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    font-family: 'Titillium Web', sans-serif !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.um-directory .um-member-name a:hover {
    color: #0073aa !important;
}

.um-directory .um-member-meta-main {
    color: #555555 !important;
    font-size: 15px !important;
    font-family: 'Titillium Web', sans-serif !important;
}

/* Hide the 'Edit Profile' button from public view */
.um-directory .um-member-edit {
    display: none !important;
}


/* ========================================================
   2. GRID VIEW STYLING (Cards with Cover Photos)
======================================================== */
.um-directory .um-members-grid .um-member {
    padding: 0 0 30px 0 !important; /* 0 top padding for edge-to-edge cover */
    margin-top: 20px !important; 
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* Cover Photo */
.um-directory .um-members-grid .um-member-cover {
    width: 100% !important;
    height: 120px !important; 
    margin: 0 !important;
    background-color: #f0f0f0 !important; 
    display: block !important;
}

.um-directory .um-members-grid .um-member-cover img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; 
}

/* Grid Avatar (Overlapping Cover Photo) */
.um-directory .um-members-grid .um-member-photo {
    margin-top: -55px !important; /* Pulls avatar up into cover photo */
    margin-bottom: 10px !important;
    z-index: 2 !important;
}

.um-directory .um-members-grid .um-member-photo a {
    display: inline-block !important; 
    border-radius: 50% !important;
    background: #ffffff !important;
    padding: 5px !important; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
}

.um-directory .um-members-grid .um-member-photo img {
    border-radius: 50% !important;
    width: 100px !important;
    height: 100px !important;
    object-fit: cover !important;
    border: 3px solid #ffb800 !important;
}

/* Grid Text Formatting */
.um-directory .um-members-grid .um-member-name, 
.um-directory .um-members-grid .um-member-meta-main {
    text-align: center !important;
    padding: 0 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.um-directory .um-members-grid .um-member-meta {
    border-top: 1px solid rgba(0,0,0,0.08) !important; 
    padding-top: 15px !important;
    margin-top: 15px !important;
    width: calc(100% - 40px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}


/* ========================================================
   3. LIST VIEW STYLING (Horizontal Rows)
======================================================== */
.um-directory .um-members-list .um-member {
    padding: 25px 30px !important;
    margin-bottom: 20px !important;
    display: block !important; /* Reverts back to standard layout */
}

/* Hide cover photo entirely in list view to save space */
.um-directory .um-members-list .um-member-cover {
    display: none !important;
}

/* List Avatar (Left side, standard size) */
.um-directory .um-members-list .um-member-photo {
    margin: 0 25px 0 0 !important; /* Pushes text to the right */
    float: left !important; /* Standard UM alignment */
}

.um-directory .um-members-list .um-member-photo a {
    display: block !important;
    border-radius: 50% !important;
}

.um-directory .um-members-list .um-member-photo img {
    border-radius: 50% !important;
    width: 90px !important;
    height: 90px !important;
    object-fit: cover !important;
    border: 3px solid #ffb800 !important; /* Keeps the accent ring */
}

/* List Text Formatting */
.um-directory .um-members-list .um-member-name, 
.um-directory .um-members-list .um-member-meta-main {
    text-align: left !important;
    padding: 0 !important;
}

.um-directory .um-members-list .um-member-meta {
    border: none !important; /* Clean look without grid divider */
    margin-top: 10px !important;
    padding: 0 !important;
    text-align: left !important;
}/* End custom CSS */