<!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:100%;
    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%;
    height:100%;
    background:#ececec;
    border-radius:18px;
    display:flex;
    overflow:hidden;
    z-index:2;
}

/* Image Section */
.image-section{
    width:280px;
    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:200px;
    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:35px;
    color:#2d3648;
    line-height:1;
    margin-bottom:10px;
}

.quote-text{
	line-height: 1.8;
    font-size: 14px;
    color: #666;
    margin-bottom:40px;
    max-width:90%;
	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;
}
.slidermsg-container{
    position:relative;
    width:850px;
    height:500px;
    overflow:hidden;
}

.slidemsg{
    position:absolute;
    width:100%;
    height:100%;
    opacity:0;
    transition:opacity 1s ease-in-out;
}

.slidemsg.active{
    opacity:1;
    z-index:2;
}
/* Responsive Design */
@media (max-width: 768px){

    .slidermsg-container,
    .quote1-wrapper{
        width:100%;
        height:auto;
    }

    .quote1-card{
        position:relative;
        left:0;
        top:0;
        width:100%;
        height:auto;
        flex-direction:column;
        padding:20px;
        box-sizing:border-box;
    }

    .image-section{
        width:100%;
        padding:0;
        margin-bottom:20px;
    }

    .image-frame{
        width:140px;
        height:280px;
    }

    .content1-section{
        padding:10px;
        text-align:center;
    }

    .quote-text{
        font-size:14px;
        text-align:left;
        margin-bottom:20px;
    }

    .quote-icon{
        font-size:50px;
    }

    .author1 h3{
        font-size:18px;
    }

    .bg-circle{
        display:none;
    }

    .expand-btn{
        width:45px;
        height:45px;
        font-size:20px;
    }
}

</style>
<body>
<section class="slide-msg-desk">
<div class="quotecontainer">

    <div class="slidermsg-container">

<!-- Slide 1 -->
        <div class="slidemsg active">
            <div class="quote1-wrapper">

                <div class="bg-circle"></div>

                <div class="quote1-card">

                    <div class="image-section">
                        <div class="image-frame">
                            <img src="assets/img/Patron%20in%20Chief.jpeg" alt="">
                        </div>
                    </div>

                    <div class="content1-section">
                        <div class="quote-icon">Message by Patron In Chief</div>
<br>
                        <p class="quote-text">
                It is my distinct pleasure to welcome you to the Allied Health Sciences and Rehabilitation Conference (ARC) 2026, being hosted by Foundation University Islamabad, Pakistan in Sept 2026.
As healthcare systems worldwide is continuing to evolve, the role of allied health and rehabilitation professionals is becoming increasingly vital in addressing complex health challenges, enhancing quality of life, and promoting sustainable healthcare outcomes. ARC 2026 reflects our commitment to fostering academic excellence, innovation, integration, quality assurance, and global engagement in these rapidly advancing fields.<br><a href="patron_in_chief" style="font-weight: 800;">READ MORE</a>
</p>
                        <div class="author1">
                <h3>Maj. Gen. Dr. Raza Ali Khan, HI(M) (Retd)</h3>
                <h3 style="line-height: 0.6;"><span>Rector - FUI</span><br>
				<span>Patron In Chief - ARC 2026</span></h3>
            </div>
                    </div>

                </div>
            </div>
        </div>

        
        
        
        <!-- Slide 2 -->
        <div class="slidemsg">
            <div class="quote1-wrapper">

                <div class="bg-circle"></div>

                <div class="quote1-card">

                    <div class="image-section">
                        <div class="image-frame">
                            <img src="assets/img/Patron...director.jpg" alt="">
                        </div>
                    </div>

                    <div class="content1-section">
                        <div class="quote-icon">Message by Patron</div>
<br>
                        <p class="quote-text">
            It gives me immense pleasure to welcome you to the Allied Health Sciences and Rehabilitation Conference (ARC 2026).<br>
ARC 2026 has been envisioned as a vibrant international platform where experts, researchers, clinicians, educators, healthcare professionals, and students can come together to engage in meaningful dialogue, share scientific advancements, and explore innovative approaches that are shaping the future of rehabilitation and allied health sciences.<br><a href="patron_director" style="font-weight: 800;"> READ MORE</a>

                        <div class="author1">
                <h3>Maj. Gen. Prof. Dr. Qudrat Ullah Malik, HI(M) (Retd)</h3>
                <h3 style="line-height: 0.6;"><span>Director - FUSH</span><br>
				<span>Patron - ARC 2026</span></h3>
            </div>
                    </div>

                </div>
            </div>
        </div>
        
        <!-- Slide 3 -->
        <div class="slidemsg">
            <div class="quote1-wrapper">

                <div class="bg-circle"></div>

                <div class="quote1-card">

                    <div class="image-section">
                        <div class="image-frame">
                            <img src="assets/img/chair person.jpg" alt="">
                        </div>
                    </div>

                    <div class="content1-section">
                        <div class="quote-icon">Message by Chairperson</div>
<br>
                        <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. <br><a href="chairperson" style="font-weight: 800;">READ MORE</a>

                        <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>

        
		
		<!-- Slide 4 -->
        <div class="slidemsg">
            <div class="quote1-wrapper">

                <div class="bg-circle"></div>

                <div class="quote1-card">

                    <div class="image-section">
                        <div class="image-frame">
                            <img src="assets/img/conference%20secretary.png" alt="">
                        </div>
                    </div>

                    <div class="content1-section">
                        <div class="quote-icon" style="font-size: 30px;">Message by Conference Secretary </div>
<br>
                        <p class="quote-text">
           It is my great pleasure to welcome you to the Allied Health Sciences and Rehabilitation Conference (ARC 2026), to be held from 25–27 September 2026 in Islamabad, Pakistan.<br>
Hosted by Foundation University Islamabad, ARC 2026 serves as an international platform for clinicians, researchers, educators, healthcare leaders, and students to exchange knowledge, foster collaboration, and explore innovations shaping the future of rehabilitation and allied health sciences.<br><a href="secretary" style="font-weight: 800;"> READ MORE</a>

                        <div class="author1">
                <h3>Dr. Sana Khalid</h3>
                <h3 style="line-height: 0.6;"><span>Assistant Professor - FUCP</span><br>
				<span>Conference Secretary - ARC 2026</span></h3>
            </div>
                    </div>

                </div>
            </div>
        </div>

    </div>
</div>
</section>
<script>
const slides = document.querySelectorAll('.slidemsg');
let current = 0;

function showSlide() {
    slides.forEach(slide => slide.classList.remove('active'));

    current++;
    if(current >= slides.length){
        current = 0;
    }

    slides[current].classList.add('active');
}

setInterval(showSlide, 9000); // Change every 3 seconds
</script>
</body>
</html>