<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Target Audience</title>

<style>
.speakers-section {
    overflow: hidden;
    padding: 40px 0;
    background: #f8f9fa;
}

.speaker-track {
    display: flex;
    gap: 25px;
    width: max-content;
    animation: scrollSpeakers 25s linear infinite;
}

.speaker-card {
    width: 250px;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    flex-shrink: 0;
}

.speaker-card img {
    width: 100%;
    height: 280px;
    object-fit: cover;
}

.speaker-card h4 {
    margin: 15px 0 5px;
    font-size: 20px;
    color: #022c5e;
}

.speaker-card span {
    display: block;
    padding-bottom: 15px;
    color: #666;
}

@keyframes scrollSpeakers {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

/* Pause on hover */
.speaker-track:hover {
    animation-play-state: paused;
}
</style>
</head>
<body>

<section id="speakers" class="speakers-section">
    <div class="speaker-track">

        <!-- Speaker 1 -->
        <div class="speaker-card">
            <img src="assets/img/3135715.png" alt="">
            <h4>Name 1</h4>
            <span>Chief Medical Officer</span>
        </div>

        <!-- Speaker 2 -->
        <div class="speaker-card">
            <img src="assets/img/3135715.png" alt="">
            <h4>Name 2</h4>
            <span>Chief Medical Officer</span>
        </div>

        <!-- Speaker 3 -->
        <div class="speaker-card">
            <img src="assets/img/3135715.png" alt="">
            <h4>Name 3</h4>
            <span>Chief Medical Officer</span>
        </div>

        <!-- Speaker 4 -->
        <div class="speaker-card">
            <img src="assets/img/3135715.png" alt="">
            <h4>Name 4</h4>
            <span>Chief Medical Officer</span>
        </div>

        <!-- Duplicate cards for smooth infinite scrolling -->
        <div class="speaker-card">
            <img src="assets/img/3135715.png" alt="">
            <h4>Name 1</h4>
            <span>Chief Medical Officer</span>
        </div>

        <div class="speaker-card">
            <img src="assets/img/3135715.png" alt="">
            <h4>Name 2</h4>
            <span>Chief Medical Officer</span>
        </div>

        <div class="speaker-card">
            <img src="assets/img/3135715.png" alt="">
            <h4>Name 3</h4>
            <span>Chief Medical Officer</span>
        </div>

        <div class="speaker-card">
            <img src="assets/img/3135715.png" alt="">
            <h4>Name 4</h4>
            <span>Chief Medical Officer</span>
        </div>

    </div>
</section>
</body>
</html>