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

/* =====================================================
   AGENTS PAGE — agents.css
   All styles scoped with "ag-" prefix so they
   never bleed into other pages on the site.
   Place this file at: public/front/css/agents.css
   ===================================================== */

:root {
    /*background-color: ;*/
    --primary-color: #000000;
    --secondary-color: #23b8bb;
    --bg-color: #f4f4f4;
    --bg-white: #fff;
    --bg-black: #000;
    --main-color: #23b8bb; 
    --main-lighter: #73ced7;
    --second-main-color: #23b8bb;  
    --off-white: #f1f1f1;
    --third-main-color: #23b8bb; 
    --main-bit-dark: #106b74;
   --main-color-dark: #106b74;


    /*Text Style*/
    --font-sans: "Montserrat", sans-serif;

    --font-serif: "Playfair Display", serif;

    --primary-font: "Montserrat", sans-serif;
    --secondary-font: "Playfair Display", serif;
    --primary-text: #4D4848;
    --secondary-text: #23b8bb;
    --text-white: #fff;
    --text-black: #000;
    --text-gray: #e4e4e4;
}



/* -------------------------------------------------------
   1. THREE FEATURES STRIP
   White background, 3 columns, illustration + heading + text
-------------------------------------------------------- */
.ag-features-sec {
    background: #ffffff;
    padding: 60px 0 50px;
    border-bottom: 1px solid #eeeeee;
}

.ag-features-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 30px;
}

.ag-features-row {
    display: flex;
    gap: 48px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.ag-feature {
    flex: 1 1 260px;
    min-width: 220px;
    text-align: left;
}

.ag-feature__img-wrap {
    width: 100%;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
}

.ag-feature__img {
    max-width: 100%;
    /* max-height: 160px; */
    object-fit: contain;
    display: block;
}

.ag-feature__heading {
    font-family: "Montserrat", sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #23b8bb;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 12px 0;
    line-height: 1.4;
}

.ag-feature__text {
    font-family: "Montserrat", sans-serif;
    font-size: 17px;
    color: #555555;
    line-height: 1.7;
    margin: 0;
}


/* -------------------------------------------------------
   2. OUR STORY
   Light grey background, centered text block
-------------------------------------------------------- */
.ag-story-sec {
    background: #f7f7f7;
    padding: 60px 0;
}

.ag-story-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 30px;
    text-align: center;
}

.ag-story__title {
    font-family: "Playfair Display", serif;
    font-size: 35px;
    font-weight: 700;
    color: #23b8bb;
    margin: 0 0 20px 0;
}

.ag-story__text {
    font-family: "Montserrat", sans-serif;
    font-size: 17px;
    color: #555555;
    line-height: 1.8;
    margin: 0;
}


/* -------------------------------------------------------
   3. EXPERT AGENTS
   White background, square image cards in a row
-------------------------------------------------------- */
.ag-agents-sec {
    background: #ffffff;
    padding: 60px 0 55px;
}

.ag-agents-container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 26px;
    text-align: center;
}

.ag-agents__title {
    font-family: "Playfair Display", serif;
    font-size: 30px;
    font-weight: 700;
    color: #23b8bb;
    margin: 0 0 40px 0;
}

.ag-agents-row {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.ag-agent {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1 1 300px;
    max-width: 360px;
    min-width: 260px;
    background: #23b8bb;
    text-align: left;
    overflow: hidden;
}

.ag-agent__photo-wrap {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 0;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: none;
    background: #e7eef4;
}

.ag-agent__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

.ag-agent__name {
    font-family: "Playfair Display", serif;
    font-size: 20px;
    font-weight: 700;
    color: #23b8bb;
    margin: 22px 22px 8px;
    text-align: left;
    line-height: 1.2;
}

.ag-agent__role {
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    color: #000;
    margin: 0 22px 34px;
    text-align: left;
    line-height: 1.4;
}


/* -------------------------------------------------------
   4. JOIN US CTA BANNER
   Teal background, white text, centered
-------------------------------------------------------- */
.ag-join-sec {
    background: var(--off-white);
    padding: 48px 30px;
}

.ag-join-container {
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
}

.ag-join__title {
    font-family: var(--font-sans);
    font-size: 50px;
    font-weight: 700;
    color: var(--main-color);
    margin: 0 0 18px 0;
}

.ag-join__text {
    font-family: var(--font-serif);
    font-size: 17px;
    color: var(--bg-black);
    line-height: 1.75;
    margin: 0 0 12px 0;
}

.ag-join__text:last-child {
    margin-bottom: 0;
}

.ag-join__text strong {
    color: #ffffff;
    font-weight: 700;
}


/* -------------------------------------------------------
   5. START YOUR SEARCH TODAY
   Full-width teal/ocean background image with dark overlay,
   white centered text + orange CTA button
-------------------------------------------------------- */
.ag-search-sec {
    background-image: url('https://sandpipercoverealtydestin.com/wp-content/uploads/2022/06/pexels-tom-fisk-3568520-scaled.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
}

.ag-search-overlay {
    background: var(--off-white);
    padding: 80px 30px;
    width: 100%;
}

.ag-search-container {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

.ag-search__title {
    font-family: "Montserrat", sans-serif;
    font-size: 34px;
    font-weight: 900;
    color: var(--main-color);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin: 0 0 24px 0;
    line-height: 1.2;
}

.ag-search__text {
    font-family: "Montserrat", sans-serif;
    font-size: 17px;
    color: var(--bg-black);
    line-height: 1.8;
    margin: 0 0 32px 0;
}

.ag-search__btn {
    display: inline-block;
    background: #000;
    color: #ffffff;
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 14px 36px;
    border-radius: 3px;
    transition: background 0.2s ease;
}

.ag-search__btn:hover {
    background: #23b8bb;
    color: #ffffff;
    text-decoration: none;
}


/* -------------------------------------------------------
   6. RESPONSIVE
-------------------------------------------------------- */
@media (max-width: 900px) {
    .ag-features-row {
        gap: 32px;
    }

    .ag-agents-row {
        gap: 20px;
    }
}

@media (max-width: 680px) {
    .ag-features-sec {
        padding: 40px 0 36px;
    }

    .ag-features-row {
        flex-direction: column;
        gap: 36px;
    }

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

    .ag-story-sec,
    .ag-agents-sec {
        padding: 44px 0;
    }

    .ag-story__title,
    .ag-agents__title {
        font-size: 24px;
    }

    .ag-agents-row {
        gap: 22px;
    }

    .ag-agent {
        max-width: 380px;
        min-width: 0;
        width: 100%;
    }

    .ag-agent__photo-wrap {
        width: 100%;
        height: auto;
    }

    .ag-join-sec {
        padding: 38px 20px;
    }

    .ag-join__title {
        font-size: 22px;
    }

    .ag-search-overlay {
        padding: 56px 20px;
    }

    .ag-search__title {
        font-size: 24px;
        letter-spacing: 0.8px;
    }

    .ag-search__text {
        font-size: 13.5px;
    }

    .ag-features-container,
    .ag-story-container,
    .ag-agents-container,
    .ag-join-container,
    .ag-search-container {
        padding: 0 18px;
    }
}