/* Team Section - Horizontal Carousel */
.team-section {
    max-width: 1240px;
    margin: 30px auto;
    padding: 0 20px;
}

.team-header {
    text-align: center;
    margin-bottom: 50px;
}

.team-title {
    font-size: 40px;
    color: #000;
    font-weight: 500;
    margin: 0 0 15px 0;
}

.team-title .highlight {
    color: #5DB873;
}

.team-description {
    color: #666;
    font-size: 20px;
    line-height: 1.6;
    max-width: 700px;
    margin: 0 auto;
}

/* Cards Container */
.team-cards-container {
    position: relative;
    overflow: hidden;
    margin-bottom: 30px;
}

.team-cards {
    display: flex;
    gap: 20px;
    transition: transform 0.3s ease;
    will-change: transform;
}

/* Individual Team Card */
.team-card {
    flex: 0 0 calc(25% - 15px);
    background-color: rgba(93, 184, 115, 0.85);
    background-image: url('data:image/svg+xml,<svg width="295" height="274" viewBox="0 0 295 274" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M403.292 205.188V154.027H396.047V148.515C396.047 138.56 377.352 137.456 377.352 148.515V154.027H370.107V168.766H367.016V107.9C367.016 105.693 365.645 103.134 363.579 103.134H358.372V97.5867H339.71V103.134H333.837C332.101 103.134 330.729 106.051 330.729 107.9V184.723H326.804V134.331H316.76V105.592H308.815V85.7104L303.272 75.7549H288.048L282.875 85.7104V120.373H265.322V73.3153L257.377 65.2089V53.792L252.534 44.9698H246.291L243.883 35.3722H230.731L228.324 44.9698H221.75L217.243 53.792L216.907 65.2089L208.962 73.3153V180.267H202.417V101.983C200.681 102.18 198.643 101.625 198.643 100.36V88.1978L193.436 50.6067H168.896L160.951 88.1978H148.834L141.589 122.091V136.073H137.418L131.45 161.531C130.022 161.507 128.633 160.976 128.633 159.897V0H85.7392V77.7293H69.239V18.3363H27.7448C23.2376 18.3363 19.4359 24.9514 19.4359 30.1111V103.152H6.31178V65.6324H-1.63319V58.9815H-5.77087V34.6862H-7.87048V58.9815H-22.3943V65.6324H-30.0034V148.641H-39.0289V132.255C-51.4811 122.687 -64.9691 121.942 -78.7875 132.255V193.247H-83.793V119.132H-115.461V157.725H-129.151V165.832C-129.151 166.858 -130.679 167.347 -132.096 167.287V205.182H-144.441V274H132.981H410.403V205.182H403.292V205.188ZM394.648 164.34H397.755V173.192H394.648V164.34ZM388.438 164.34H391.546V173.192H388.438V164.34ZM381.859 190.127H384.967V198.591H381.859V190.127ZM375.622 190.127H378.758V198.591H375.622V190.127ZM358.736 136.639H361.843V145.103H358.736V136.639ZM352.498 136.639H355.606V145.103H352.498V136.639ZM342.818 114.551H345.925V123.015H342.818V114.551ZM342.818 160.577H345.925V169.429H342.818V160.577ZM336.603 114.551H339.71V123.015H336.603V114.551ZM318.154 153.496H321.261V161.96H318.154V153.496ZM297.729 90.8701H300.864V99.3344H297.729V90.8701ZM297.729 126.97H300.864V135.434H297.729V126.97ZM297.729 153.496H300.864V161.96H297.729V153.496ZM291.52 90.8701H294.627V99.3344H291.52V90.8701ZM291.52 126.97H294.627V135.434H291.52V126.97ZM251.498 144.412H254.605V152.876H251.498V144.412ZM244.925 127.483H248.396V135.947H244.925V127.483ZM244.925 144.412H248.396V152.876H244.925V144.412ZM238.682 77.7293H242.153V86.2294H238.682V77.7293ZM238.682 144.412H242.153V152.876H238.682V144.412ZM232.472 77.7293H235.58V86.2294H232.472V77.7293ZM225.563 94.6936H228.671V103.158H225.563V94.6936ZM219.32 94.6936H222.456V103.158H219.32V94.6936ZM188.968 108.831H192.076V117.653H188.968V108.831ZM182.725 88.9494H185.833V97.4137H182.725V88.9494ZM182.725 108.831H185.833V117.653H182.725V108.831ZM176.516 88.9494H179.623V97.4137H176.516V88.9494ZM169.237 143.081H172.373V151.546H169.237V143.081ZM157.485 126.147H160.592V134.611H157.485V126.147ZM151.276 126.147H154.383V134.611H151.276V126.147ZM136.388 175.871H139.495V184.723H136.388V175.871ZM119.63 54.5197H122.765V63.0197H119.63V54.5197ZM113.421 54.5197H116.528V63.0197H113.421V54.5197ZM113.421 91.3652H116.528V99.8295H113.421V91.3652ZM107.178 91.3652H110.313V99.8295H107.178V91.3652ZM97.1612 14.3696H100.633V22.8696H97.1612V14.3696ZM90.9519 14.3696H94.0594V22.8696H90.9519V14.3696ZM57.1284 34.9129H60.2358V43.3771H57.1284V34.9129ZM50.9191 34.9129H54.0265V43.3771H50.9191V34.9129ZM50.9191 92.0273H54.0265V100.492H50.9191V92.0273ZM44.6762 92.0273H47.8116V100.492H44.6762V92.0273ZM34.3236 58.4923H37.431V66.9566H34.3236V58.4923ZM34.3236 120.373H37.431V129.225H34.3236V120.373ZM28.0863 58.4923H31.1938V66.9566H28.0863V58.4923ZM-3.69923 137.832H-0.591782V146.296H-3.69923V137.832ZM-9.94212 77.7949H-6.83467V86.2592H-9.94212V77.7949ZM-9.94212 137.832H-6.83467V146.296H-9.94212V137.832ZM-16.1514 77.7949H-13.044V86.2592H-16.1514V77.7949ZM-16.1514 110.554H-13.044V119.055H-16.1514V110.554ZM-22.3887 110.554H-19.2533V119.055H-22.3887V110.554ZM-91.1053 164.215H-88.373V171.665H-91.1053V164.215ZM-96.5699 164.215H-93.8376V171.665H-96.5699V164.215ZM-104.498 132.446H-101.766V140.236H-104.498V132.446ZM-109.968 132.446H-107.236V140.236H-109.968V132.446ZM-121.541 176.545H-118.809V183.995H-121.541V176.545Z" fill="%2346AD67"/></svg>');
    border-radius: 12px;
    padding: 50px 0px;
    color: white;
    position: relative;
    height: 400px;
    display: flex;
    flex-direction: column;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom;
    overflow: hidden;
    scroll-snap-align: start;
    min-width: calc(25% - 15px);
}

.team-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(93, 184, 116, 0.135);
    border-radius: 12px;
    z-index: 0;
}

.team-card * {
    position: relative;
    z-index: 1;
}

/* User Image */
.user-img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.user-img img {
    width: 100%;
    height: 320px;
    position: absolute;
    top: 30px;
    left: 0;
    right: 0;
    object-fit: contain;
    object-position: bottom center;
}

/* Team Info (visible by default) */
.team-info {
    width: 100%;
    padding: 15px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, #46ad67b5 30%, #46ad6700 100%);
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.team-member-name {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    color: #fff;
}

.team-member-title {
    font-size: 14px;
    color: #ffffff;
    font-weight: 400;
    margin: 5px 0 0 0;
}

/* Hover Content (hidden by default) */
.team-hover-content {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    padding: 30px 25px;
    opacity: 0;
    visibility: hidden;
    border-radius: 12px;
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
}

.team-hover-content .team-member-name {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 5px;
}

.team-hover-content .team-member-title {
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 15px;
}

.team-member-role {
    flex: 1;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 15px;
    color: #fff;
}

.contact-label {
    font-size: 16px;
    font-weight: 400;
    margin: 0;
    color: #fff;
}

.contact-email {
    font-size: 16px;
    font-weight: 400;
    margin: 5px 0 0 0;
    color: #fff;
}

/* Read More Button */
.btn-read-more {
    background: #fff;
    color: #5DB873;
    padding: 8px 20px;
    border: none;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: auto;
}

.btn-read-more:hover {
    background: #f0f0f0;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Hover Effect */
.team-card:hover .user-img,
.team-card:hover .team-info {
    opacity: 0;
    visibility: hidden;
}

.team-card:hover .team-hover-content {
    opacity: 1;
    visibility: visible;
}

/* Navigation Controls */
.navigation {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 30px;
}

.nav-btn {
    width: 45px;
    height: 45px;
    border: none;
    border-radius: 50%;
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 6px 5px rgba(0, 0, 0, 0.2);
}

.nav-btn:hover {
    background: #f5f5f5;
    transform: scale(1.05);
}

.nav-btn.active {
    background: #5DB873;
    color: white;
}

.nav-btn.active svg {
    fill: #fff;
}

.nav-btn svg {
    width: 20px;
    height: 20px;
    fill: #666;
}

.nav-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Progress Bar */
.nav-progress {
    flex: 1;
    height: 3px;
    background: #e0e0e0;
    border-radius: 2px;
    overflow: hidden;
}

.nav-progress-bar {
    height: 100%;
    background: #5DB873;
    transition: width 0.3s ease;
    border-radius: 2px;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .team-card {
        flex: 0 0 calc(33.333% - 14px);
        min-width: calc(33.333% - 14px);
    }
}

@media (max-width: 900px) {
    .team-title {
        font-size: 32px;
    }
    
    .team-description {
        font-size: 18px;
    }
    
    .team-card {
        flex: 0 0 calc(50% - 10px);
        min-width: calc(50% - 10px);
    }
}

@media (max-width: 600px) {
    .team-section {
        padding: 0 15px;
    }
    
    .team-title {
        font-size: 28px;
    }
    
    .team-description {
        font-size: 16px;
    }
    
    .team-card {
        flex: 0 0 calc(100% - 20px);
        min-width: calc(100% - 20px);
        height: 450px;
    }
    
    .nav-progress {
        max-width: 150px;
    }
}

/* Agent Modal Styles */
.agent-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.agent-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
}

.agent-modal-content {
    position: relative;
    background: white;
    border-radius: 16px;
    max-width: 800px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    z-index: 1;
}

.agent-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border: none;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 2;
}

.agent-modal-close:hover {
    background: rgba(0, 0, 0, 0.2);
    transform: rotate(90deg);
}

.agent-modal-close svg {
    fill: #333;
}

.agent-modal-body {
    display: flex;
    gap: 30px;
    padding: 40px;
    align-items: flex-start;
    max-height: calc(90vh - 80px);
    overflow-y: auto;
}

.agent-modal-image {
    flex: 0 0 300px;
    height: 400px;
    background: linear-gradient(135deg, rgba(93, 184, 115, 0.85), rgba(70, 173, 103, 0.85));
    border-radius: 12px;
    overflow: hidden;
    position: sticky;
    top: 0;
}

.agent-modal-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.agent-modal-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.agent-modal-info h2 {
    margin: 0 0 10px 0;
    font-size: 32px;
    color: #333;
    font-weight: 600;
}

.modal-agent-position {
    font-size: 18px;
    color: #5DB873;
    margin: 0 0 20px 0;
    font-weight: 500;
}

.modal-agent-bio {
    font-size: 16px;
    line-height: 1.6;
    color: #666;
    margin-bottom: 30px;
    flex: 1;
}

.modal-agent-contact {
    border-top: 2px solid #f0f0f0;
    padding-top: 20px;
}

.modal-agent-contact .contact-label {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 0 0 10px 0;
}

.modal-agent-contact p {
    font-size: 15px;
    color: #666;
    margin: 5px 0;
}

.modal-agent-contact p:not(.contact-label) {
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-agent-contact p:not(.contact-label)::before {
    content: '•';
    color: #5DB873;
    font-size: 20px;
}

/* Modal Responsive */
@media (max-width: 768px) {
    .agent-modal-body {
        flex-direction: column;
        padding: 30px 20px;
    }
    
    .agent-modal-image {
        flex: 0 0 250px;
        height: 300px;
        margin: 0 auto;
    }
    
    .agent-modal-info h2 {
        font-size: 24px;
    }
    
    .modal-agent-position {
        font-size: 16px;
    }
}