/* ======================================================
   Timeline CSS
   Hazrat Syed Shah Qadri (R.H.)
====================================================== */

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

:root{

    --primary:#0F7A3A;
    --secondary:#C8A04A;
    --dark:#14351F;
    --light:#F8F8F4;
    --white:#ffffff;
    --text:#555;
    --shadow:0 15px 35px rgba(0,0,0,.12);

}

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Poppins',sans-serif;
    background:var(--light);
    color:var(--text);
    overflow-x:hidden;

}

/*==============================
Scrollbar
==============================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);
    border-radius:20px;

}

::-webkit-scrollbar-track{

    background:#eee;

}

/*==============================
Hero
==============================*/

.timeline-hero{

    min-height:70vh;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    color:#fff;

    background:
    linear-gradient(rgba(8,40,20,.82),rgba(8,40,20,.82)),
    url("images/timeline-bg.jpg");

    background-size:cover;
    background-position:center;
    background-attachment:fixed;

    position:relative;

}

.timeline-hero::before{

content:"";

position:absolute;

inset:0;

background:url("images/pattern.png");

opacity:.08;

}

.timeline-hero .container{

position:relative;
z-index:2;

}

.timeline-hero h1{

font-size:4rem;
font-weight:800;

}

.timeline-hero h2{

font-size:2rem;
color:#FFD46C;

margin-top:15px;

}

.timeline-hero p{

max-width:700px;
margin:auto;
margin-top:25px;

}

/*==============================
Portrait
==============================*/

.museum-portrait{

width:280px;
height:280px;

object-fit:cover;

border-radius:50%;

border:10px solid white;

box-shadow:var(--shadow);

transition:.4s;

}

.museum-portrait:hover{

transform:scale(1.05);

}

/*==============================
Stats
==============================*/

.stat-box{

background:white;

padding:25px;

border-radius:15px;

text-align:center;

box-shadow:var(--shadow);

transition:.4s;

margin-top:20px;

}

.stat-box:hover{

transform:translateY(-8px);

background:var(--primary);

color:white;

}

.stat-box h3{

font-size:26px;

font-weight:700;

color:var(--secondary);

}

.stat-box:hover h3{

color:white;

}

/*==============================
Timeline
==============================*/

.timeline-section{

padding:100px 0;

position:relative;

}

.main-timeline{

position:relative;

}

.main-timeline::before{

content:"";

position:absolute;

left:50%;

top:0;

width:5px;

height:100%;

background:linear-gradient(var(--secondary),var(--primary));

transform:translateX(-50%);

border-radius:10px;

}

/*==============================
Timeline Item
==============================*/

.timeline{

position:relative;

margin-bottom:80px;

}

.timeline:nth-child(odd) .timeline-content{

margin-right:55%;

}

.timeline:nth-child(even) .timeline-content{

margin-left:55%;

}

.timeline-content{

background:white;

border-radius:20px;

overflow:hidden;

box-shadow:var(--shadow);

transition:.4s;

}

.timeline-content:hover{

transform:translateY(-8px);

}

.timeline-image img{

width:100%;

height:260px;

object-fit:cover;

}

.timeline-text{

padding:30px;

}

.timeline-text h3{

color:var(--primary);

font-weight:700;

margin-bottom:10px;

}

.timeline-text h6{

color:#999;

margin-bottom:15px;

}

.timeline-text p{

line-height:1.8;

}

/*==============================
Timeline Icon
==============================*/

.timeline-icon{

position:absolute;

left:50%;

top:30px;

transform:translateX(-50%);

width:70px;
height:70px;

border-radius:50%;

background:var(--primary);

display:flex;

align-items:center;

justify-content:center;

font-size:30px;

color:white;

box-shadow:0 0 20px rgba(15,122,58,.5);

z-index:99;

border:5px solid white;

}

/*==============================
Biography
==============================*/

.bio{

display:none;

margin-top:20px;

padding:20px;

background:#F5F7F6;

border-left:4px solid var(--secondary);

border-radius:10px;

animation:fadeIn .4s ease;

}

.bio.show{

display:block;

}

.read-more{

margin-top:10px;

padding:10px 25px;

border-radius:30px;

}

/*==============================
Quote
==============================*/

.quote-section{

padding:100px 20px;

background:

linear-gradient(rgba(10,40,18,.85),rgba(10,40,18,.85)),
url("images/quote-bg.jpg");

background-size:cover;

background-position:center;

color:white;

text-align:center;

}

.quote-section h2{

font-size:2.3rem;

max-width:900px;

margin:auto;

font-weight:600;

line-height:1.6;

}

/*==============================
Footer
==============================*/

footer{

background:#0B2416;

padding:45px;

color:white;

text-align:center;

}

footer h4{

color:var(--secondary);

margin-bottom:15px;

}

/*==============================
Animation
==============================*/

@keyframes fadeIn{

from{

opacity:0;

transform:translateY(20px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/*==============================
Responsive
==============================*/

@media(max-width:991px){

.timeline-hero h1{

font-size:3rem;

}

.timeline-hero h2{

font-size:1.6rem;

}

.main-timeline::before{

left:30px;

}

.timeline-content{

margin-left:80px !important;
margin-right:0 !important;

}

.timeline-icon{

left:30px;

}

}

@media(max-width:768px){

.timeline-hero{

padding:80px 20px;

}

.timeline-hero h1{

font-size:2.2rem;

}

.timeline-hero h2{

font-size:1.3rem;

}

.museum-portrait{

width:200px;
height:200px;

margin-bottom:30px;

}

.timeline-image img{

height:220px;

}

.timeline-text{

padding:20px;

}

.quote-section h2{

font-size:1.5rem;

}

}

@media(max-width:576px){

.stat-box{

margin-bottom:20px;

}

.timeline-content{

margin-left:65px !important;

}

.timeline-icon{

width:55px;
height:55px;

font-size:22px;

left:25px;

}

.main-timeline::before{

left:25px;

}

}