<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quote Card</title>
    <link rel="stylesheet" href="style.css">
</head>
<style>

.quotecontainer{
    background:#4f6485;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
}

.quote1-wrapper{
    position:relative;
    width:850px;
    height:500px;
}

/* Right Background Circle */
.bg-circle{
    position:absolute;
    right:-60px;
    top:120px;
    width:220px;
    height:220px;
    border-radius:50%;
    background:#3f5472;
}

/* Main Card */
.quote1-card{
    position:absolute;
    top:10px;
    left:40px;
    width:100%px;
    height:100%;
    background:#ececec;
    border-radius:18px;
    display:flex;
    overflow:hidden;
    z-index:2;
}

/* Image Section */
.image-section{
    width:220px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding-left:20px;
}

.image-section img{
    width:160px;
    height:340px;
    object-fit:cover;

    /* Creates the oval/capsule shape */
    border-radius:80px;

    display:block;
}

.image-section{
    width:220px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.image-frame{
    width:160px;
    height:340px;
    border-radius:100px;
    overflow:hidden;
}

.image-frame img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* Content Section */
.content1-section{
    flex:1;
    padding:30px 45px;
    color:#2d3648;
}

.quote-icon{
    font-size:80px;
    color:#2d3648;
    line-height:1;
    margin-bottom:10px;
}

.quote-text{
	line-height: 1.8;
    font-size: 14px;
    color: #666;
    margin-bottom:40px;
    max-width:100%;
	text-align: justify;
}

.author1 h3{
    font-size:20px;
    font-weight:700;
}

.author1 span{
    font-size:12px;
    color:#666;
    font-style:italic;
	line-height: unset !important;
}

/* Expand Button */
.expand-btn{
    position:absolute;
    bottom:10px;
    right:10px;
    width:60px;
    height:60px;
    background:#d9d9d9;
    border-radius:18px 0 18px 0;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:28px;
    font-weight:bold;
    z-index:5;
}

</style>
<body>
<div class="quotecontainer">
<div class="quote1-wrapper">

    <!-- Background Circle -->
    <div class="bg-circle"></div>

    <!-- Quote Card -->
    <div class="quote1-card" data-aos="fade-up" data-aos-delay="100">

        <!-- Left Image -->
		<div class="image-section">
    <div class="image-frame">
        <img src="assets/img/chair person.jpg" alt="Jeff Bezos">
    </div>
</div>

        <!-- Right Content -->
        <div class="content1-section">
            <div class="quote-icon">❝</div>
            <p class="quote-text">
                Dear esteemed colleagues,<br>
It is my privilege to welcome you to the Allied Health Sciences and Rehabilitation Conference
(ARC 2026), being hosted by Foundation University Islamabad, Pakistan.
ARC 2026 has been conceptualized as a high-impact international platform dedicated to
advancing scientific inquiry, clinical innovation, and academic excellence within rehabilitation
and allied health sciences. The conference is designed to serve as a structured forum where
evidence, expertise, and emerging perspectives converge to advance contemporary healthcare
practice. <a href="chairperson" style="font-weight: 800;">READ MORE</a>
            </p>
            <div class="author1">
                <h3>Prof. Dr. Furqan Ahmed Siddiqi</h3>
                <h3 style="line-height: 0.6;"><span>Principal/Dean</span><br>
				<span>Foundation University College of Physical Therapy (FUCP)</span><br>
				<span>Foundation University College of Allied Health Sciences (FUCAHS)</span><br>
				<span>Chairperson, ARC 2026</span></h3>
            </div>
        </div>
    </div>

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