/* Agent listing Page Styles */

        .agent-section {
            padding: 40px 20px 60px;
            max-width: 1200px;
            margin: 0 auto;
font-family:var(--main-font)!Important;
        }

        .agent-section h1 {
text-transform: uppercase;
    font-weight: 400;
    padding-bottom: 5px;
    font-size: 23px;
    border-bottom: 1px solid var(--second-color);
    display: inline;
        }

        .agent-list {
            max-width: 1000px;
            margin: 0 auto;
        }

        /* LIVE SEARCH BAR */
        .agent-search {
            max-width: 500px;
            margin: 0 auto 30px auto;
            display: flex;
            gap: 8px;
            justify-content: center;
        }

        .agent-search-input {
            flex: 1 1 auto;
            padding: 8px 10px;
            border: 1px solid #ccc;
            border-radius: 3px;
            font-size: 0.95rem;
        }

        .agent-search-clear {
            padding: 8px 10px;
            border: 1px solid #ccc;
            background: #f7f7f7;
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: .08em;
            border-radius: 3px;
            cursor: pointer;
        }

        .agent-search-clear:hover {
            background: #eee;
        }

        .agent-row {
            display: flex;
            gap: 40px;
            padding: 30px 0;
            border-top: 1px solid #e2e2e2;
            align-items: flex-start;
        }

        /* left column: photo */
        .agent-photo-wrap {
            flex: 0 0 180px;
        }

        .agent-photo-wrap img.agent-photo {
            width: 180px;
            height: 220px;
            object-fit: cover;
            display: block;
        }

        /* middle column: main info */
        .agent-main {
            flex: 1 1 auto;
            text-align: left;
        }

        .agent-name {
            font-size: 1.3rem;
            font-weight: 700;
            margin: 0 0 4px;
        }

        .agent-role {
            font-size: 0.85rem;
            letter-spacing: .10em;
            text-transform: uppercase;
            color: #777;
            margin-bottom: 14px;

        }

        .agent-divider {
            width: 40px;
            height: 2px;
            background: var(--third-color); 
            margin: 6px 0 12px;
        }

        .agent-office-address {
            font-size: 0.95rem;
            color: #444;
            line-height: 1.6;
        }

        /* right column: contact */
        .agent-contact-side {
            flex: 0 0 210px;
            text-align: left;
            font-size: 0.9rem;
        }

        .agent-contact-heading {
            font-size: 0.8rem;
            letter-spacing: .18em;
            text-transform: uppercase;
            color: #777;
            margin-bottom: 8px;
        }

        .agent-contact-line {
            margin-bottom: 4px;
        }

        .agent-contact-label {
            font-weight: 700;
            margin-right: 4px;
        }

        .agent-contact-link {
            color: var(--third-color);
            text-decoration: none;
        }

        .agent-contact-link:hover {
            text-decoration: underline;
        }

        .agent-send-message {
            margin-top: 18px;
        }

        .agent-send-message a {
            font-size: 0.85rem;
            letter-spacing: .18em;
            text-transform: uppercase;
            text-decoration: none;
            color: #000;
        }

        .agent-send-message a span.arrow {
            margin-left: 6px;
        }

        .agent-send-message a:hover {
            text-decoration: underline;
        }

        /* responsive */
        @media (max-width: 900px) {
            .agent-row {
                flex-direction: column;
                gap: 20px;
            }

            .agent-photo-wrap {
                flex: none;
            }

            .agent-contact-side {
                flex: none;
            }
        }