body{
font-family:'Poppins',sans-serif;
background:#f7f9fc;
}


/* HERO */

.history-hero{

height:45vh;

background:linear-gradient(rgba(0,0,0,0.65),rgba(0,0,0,0.65)),
url('../../assets/image/photo/oss.jpeg');

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

display:flex;
align-items:center;
justify-content:center;

text-align:center;

color:white;
}

.history-hero h1{
font-size:50px;
font-weight:700;
}

.history-hero p{
font-size:18px;
opacity:0.9;
}



/* INTRO */

.history-intro{
padding:80px 0;
background:white;
}

.history-img{

border-radius:12px;

box-shadow:0 15px 35px rgba(0,0,0,0.15);
}

.history-intro h2{

font-weight:700;
margin-bottom:15px;
}



/* SECTION TITLE */

.section-title{

font-size:36px;
font-weight:700;
margin-bottom:60px;
}



/* TIMELINE */

.history-timeline{

padding:90px 0;
background:#f4f6fa;
}

.timeline{

position:relative;

max-width:900px;

margin:auto;
}

.timeline::before{

content:"";

position:absolute;

left:50%;

top:0;

width:4px;

height:100%;

background:#ff7a00;

transform:translateX(-50%);
}



/* TIMELINE ITEM */

.timeline-item{

position:relative;

width:50%;

padding:20px 40px;

box-sizing:border-box;
}

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

left:0;
text-align:right;
}

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

left:50%;
}



/* YEAR */

.timeline-year{

font-weight:700;

background:#ff7a00;

color:white;

display:inline-block;

padding:6px 14px;

border-radius:20px;

margin-bottom:10px;
}



/* CONTENT */

.timeline-content{

background:white;

padding:20px;

border-radius:10px;

box-shadow:0 10px 25px rgba(0,0,0,0.08);

transition:0.3s;
}

.timeline-content:hover{

transform:translateY(-6px);

box-shadow:0 15px 35px rgba(0,0,0,0.15);
}



/* MOBILE */

@media(max-width:768px){

.timeline::before{

left:8px;
}

.timeline-item{

width:100%;

padding-left:30px;

padding-right:10px;

margin-bottom:30px;
}

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

left:0;
}

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

text-align:left;
}

.history-hero h1{
font-size:32px;
}

}