/*
==========
Styles for about section
==========
*/

.about, .experience{
    width:100%;
    padding-top:80px;
    padding-bottom:80px;
    display:flex;
    justify-content:center;
}

/*
==========
Block styles
==========
*/

.about__block, .experience__block{
    max-width:1200px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
    padding-left:2em;
    padding-right:2em;
}

.experience{
    background-color: var(--lightsilver-color);
}

/* Column images */
.about__column--image img,
.experience__column--image img{
    width:100%;
    height:auto;
    border-radius:5px;
    object-fit:cover;
}

/* Text styles */
.about__title, .experience__title{
    color:var(--blue-color);
    font-size:2em;
    margin-bottom:20px;
}

.about__text, .experience__text{
    color:var(--black-color);
    line-height:1.6;
    margin-bottom:15px;
}

.reveal {
    opacity: 0;
    transition: all 0.8s ease;
}

.about__block--left {
    transform: translateX(-120px);
}

.about__block .about__title,
.about__block .about__text,
.about__block .about__column--image img {
    opacity: 0;
    transform: translateX(-60px);
}

.about__block.active .about__title {
    opacity: 1;
    transform: translateX(0);
    transition: all 0.8s ease;
    transition-delay: 0.2s;
}

.about__block.active .about__text {
    opacity: 1;
    transform: translateX(0);
    transition: all 0.8s ease;
    transition-delay: 0.4s;
}

.about__block.active .about__column--image img {
    opacity: 1;
    transform: translateX(0);
    transition: all 0.8s ease;
    transition-delay: 0.6s;
}

/* 
==========
Styles for Experience block cascade
==========
*/

.experience__block--right {
    transform: translateX(-120px);
}

.experience__block .experience__column--image img,
.experience__block .experience__title,
.experience__block .experience__text {
    opacity: 0;
    transform: translateX(-60px);
}

.experience__block.active .experience__column--image img {
    opacity: 1;
    transform: translateX(0);
    transition: all 0.8s ease;
    transition-delay: 0.2s;
}

.experience__block.active .experience__title {
    opacity: 1;
    transform: translateX(0);
    transition: all 0.8s ease;
    transition-delay: 0.4s;
}

.experience__block.active .experience__text:nth-child(1) {
    opacity: 1;
    transform: translateX(0);
    transition: all 0.8s ease;
    transition-delay: 0.6s;
}

.experience__block.active .experience__text:nth-child(2) {
    opacity: 1;
    transform: translateX(0);
    transition: all 0.8s ease;
    transition-delay: 0.8s;
}

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

@media(max-width:900px){
    .about__block, .experience__block{
        grid-template-columns:1fr;
        gap:40px;
    }
}

/* 
==========
History section 
==========
*/

.history{
    width:100%;
    position:relative;
    overflow:hidden;
    margin-top: 3em;
}

.history__title{
    font-size:2em;
    color:var(--blue-color);
    text-align:center;
    margin-bottom:20px;
}

.history__desc{
    text-align:center;
    margin-bottom:60px;
    color:var(--black-color);
    max-width:800px;
    margin-left:auto;
    margin-right:auto;
}

/* 
==========
Container history
==========
*/
.history__container{
    display:flex;
    align-items:center;
    position:relative;
}

.history__track{
    display:flex;
    gap:60px;
    overflow:hidden;
    scroll-behavior:smooth;
    width:100%;
    padding-bottom: 1em;
    padding-top: 1em;
}

/* 
==========
History items 
==========
*/

.history__item{
    flex:0 0 300px;
    background:var(--white-color);
    padding:20px;
    border-radius:5px;
    box-shadow:0 0px 20px var(--black-color-transparent);
    text-align:center;
    position:relative;
    z-index:2; 
}

.history__year{
    font-weight:bold;
    font-size:2em;
    color:var(--blue-color);
    display:block;
    z-index:3; 
}

.history__desc{
    color:var(--black-color);
    line-height:1.5;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 
==========
Navigation buttons 
==========
*/

.history__nav{
    background:var(--orange-color);
    border:none;
    border-radius:50%;
    width:50px;
    height:50px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:10;
}

.history__nav--prev{
    left:10px;
}

.history__nav--next{
    right:10px;
}

.history__nav svg{
    width:20px;
    height:20px;
    fill: var(--white-color);
}

/* Line timeline */
.history__line{
    position:absolute;
    top:70%;
    left:0;
    width:100%;
    height:4px;
    background:var(--orange-color);
    z-index:0;
}

/* Scroll animation */
.reveal{
    opacity:0;
    transform:translateX(-120px);
    transition:all 0.8s ease;
}

.reveal.active{
    opacity:1;
    transform:translateX(0);
}

/* Responsive */
@media(max-width:700px){
    .history__track{
        gap:20px;
    }

    .history__item{
        flex:0 0 250px;
        padding:15px;
    }

    .history__title{
        font-size:1.5em;
    }

    .history__desc{
        font-size:0.9em;
    }

    .history__nav{
        width:40px;
        height:40px;
    }
}

.history__title {
    opacity: 0;
    transform: translateX(-60px);
    transition: all 0.8s ease;
}

.history__item {
    opacity: 0;
    transform: translateX(-130px);
    transition: all 0.8s ease;
}

.history.active .history__title {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.2s;
}

.history.active .history__item:nth-child(1) {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.6s;
}

.history.active .history__item:nth-child(2) {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.8s;
}

.history.active .history__item:nth-child(3) {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 1s;
}

.history.active .history__item:nth-child(4) {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 1.2s;
}

.history.active .history__item:nth-child(5) {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 1.4s;
}

.history.active .history__item:nth-child(6) {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 1.6s;
}

.history.active .history__item:nth-child(7) {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 1.8s;
}

.history.active .history__item:nth-child(8) {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 2s;
}

/*
==========
Styles for testimonials
==========
*/

.testimonials{
    padding:80px 2em;
    background-color:var(--lightsilver-color);
    margin-top:3em;
}

.testimonials__container{
    max-width:900px;
    margin:auto;
}

.testimonials__header{
    text-align:center;
    margin-bottom:50px;
}

.testimonials__header .title__two{
    color: var(--blue-color);
}

.testimonial__description{
    margin-top: 2em;
    color: var(--black-color);
}

/*
==========
Styles for testimonials - Responsive
==========
*/

.testimonials{
    padding:80px 2em;
    background-color:var(--lightsilver-color);
    margin-top:3em;
}

.testimonials__container{
    max-width:900px;
    width: 100%;
    margin:auto;
}

.testimonials__header,
.testimonial__description,
.testimonial{
    opacity: 0;
    transform: translateX(-60px);
}

.testimonials__container.animate .testimonials__header {
    animation: slideLeftToRight 0.8s ease forwards;
    animation-delay: 0.2s;
}

.testimonials__container.animate .testimonial__description {
    animation: slideLeftToRight 0.8s ease forwards;
    animation-delay: 0.4s;
}

.testimonials__container.animate .testimonial:nth-child(1) {
    animation: slideLeftToRight 0.8s ease forwards;
    animation-delay: 0.6s;
}

.testimonials__container.animate .testimonial:nth-child(2) {
    animation: slideLeftToRight 0.8s ease forwards;
    animation-delay: 0.8s;
}

.testimonials__container.animate .testimonial:nth-child(3) {
    animation: slideLeftToRight 0.8s ease forwards;
    animation-delay: 1s;
}

@keyframes slideLeftToRight{
    from{
        opacity: 0;
        transform: translateX(-60px);
    }
    to{
        opacity: 1;
        transform: translateX(0);
    }
}

/* 
==========
Carousel 
==========
*/

.testimonials__carousel{
    position:relative;
    width:100%;
    box-shadow: 0 0 20px var(--black-color-transparent);
    border-radius: 5px;
    background-color: var(--white-color);
}

.testimonials__viewport{
    width:100%;
    overflow:hidden;
    position:relative;
}

.testimonials__track{
    display:flex;
    transition:transform .6s ease;
    width: 100%; 
}

.testimonial{
    flex:0 0 100%; 
    width: 100%;   
    background:var(--white-color);
    padding: 30px 20px; 
    border-radius:5px;
    text-align:center;
    box-sizing:border-box;
}

.testi-meta img{
    width:80px;
    height:80px;
    border-radius:50%;
    margin-bottom:10px;
}

.desc{
    margin-top: 1em;
}

.desc .title__three{
    color: var(--blue-color);
}

.desc .lead{
    color: var(--black-color);
    margin-top: 1em;
}

.testimonial .title__four{
    color: var(--orange-color);
}

.testimonials__nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:50px;
    height:50px;
    border-radius:50%;
    border:none;
    cursor:pointer;
    z-index:10;
    background:var(--orange-color);
    display:flex;
    align-items:center;
    justify-content:center;
}

.testimonials__nav svg{
    width:20px;
    height:20px;
    fill:var(--white-color);
}

.testimonials__nav--prev{
    left:-25px;
}

.testimonials__nav--next{
    right:-25px;
}

@media screen and (max-width: 768px){
    .testimonials{
        padding:60px 1em;
    }

    .testimonial{
        padding: 20px 15px;
    }

    .testimonials__nav{
        width:40px;
        height:40px;
    }

    .testimonials__nav svg{
        width:16px;
        height:16px;
    }

    .testimonials__nav--prev{
        left:-20px;
    }

    .testimonials__nav--next{
        right:-20px;
    }
}

/*
==========
Reveal animation
==========
*/

.reveal-left{
    opacity:0;
    transform:translateX(-80px);
    transition:all .8s ease;
}

.reveal-left.active{
    opacity:1;
    transform:translateX(0);
}

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

@media (max-width:700px){
    .testimonial{
        padding:25px;
    }

    .testimonials__nav{
        width:40px;
        height:40px;
    }
}