/*
==========
Styles for careers
==========
*/

.container__careers{
    width: 100%;
    height: auto;
}

.container__careers .normal{
    color: var(--black-color);
    text-align: center;
    width: 800px;
    max-width: 100%;
}

.items__cards{
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 3em;
    padding: 1em; /* Prevents overflow on small screens */
    box-sizing: border-box;
}

.item__card{
    max-width: 300px;
    height: auto;
    border-radius: 10px;
    overflow: hidden;
    opacity: 0;
    background-color: var(--lightsilver-color);
    box-shadow: 0 0 20px var(--black-color-transparent);
    transform: translateX(-60px);
}

.item__card.animate {
    animation: slideLeftToRight 0.8s ease forwards;
}

.item__card .container__image{
    height: 200px;
    width: 300px;
    display: flex;
}

.item__card .container__image img{
    width: 100%;
    height: auto;
    object-fit: cover;
}

.item__card .information{
    padding: 1em;
    display: flex;
    flex-direction: column;
    gap: .5em;
    position: relative;
    width: calc(100% - (2em + 4px));
    height: calc(100% - 234px);
    border-radius: 0px 0px 10px 10px;
}

.item__card .information .title__two{
    color: var(--orange-color);
    font-size: 1.8em;
}

.item__card .information .title__four{
    color: var(--black-color);
}

.item__card .information .data{
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: 30px calc(100% - (30px + 2em));
    gap: 1em;
}

.item__card .information .data p{
    color: var(--black-color);
    line-height: 1.6;
}

.item__card .information .data .icon__course,
.item__card .information .data .icon{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
}

.item__card .information .data .icon__course svg,
.item__card .information .data .icon svg{
    width: 100%;
    height: 100%;
    fill: var(--orange-color);
}

.item__card .information .data .title__two{
    color: var(--blue-color);
}

.footer__card{
    width: 100%;
    display: flex;
    gap: 1em;
    align-items: center;
    justify-content: flex-end;
}

.footer__card .button__green{
    display: flex;
    gap: .5em;
    align-items: center;
    justify-content: center;
}

.footer__card .button__green .icon{
    display: inline-block;
    width: 20px;
    height: 20px;
}

.footer__card .button__green .icon svg{
    width: 100%;
    height: 100%;
    fill: var(--white-color);
}

/* 
==========
Animación para cards 
========== 
*/

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

/*
==========
Styles for description.
==========
*/

.container__description{
    width: 100%;
    height: auto;
    margin-bottom: 3em;
}

.container__description .title__three,
.container__description .title__two,
.container__description .normal{
    opacity: 0;
    transform: translateX(-60px);
}

.container__description.animate .title__three{
    opacity: 1;
    transform: translateX(0);
    transition: all 0.8s ease;
    transition-delay: 0.2s;
}

.container__description.animate .title__two{
    opacity: 1;
    transform: translateX(0);
    transition: all 0.8s ease;
    transition-delay: 0.4s;
}

.container__description.animate .normal{
    opacity: 1;
    transform: translateX(0);
    transition: all 0.8s ease;
    transition-delay: 0.6s;
}

.container__description .title__three{
    color: var(--orange-color);
    text-align: center;
    margin-top: 2em;
}

.container__description .title__two{
    color: var(--blue-color);
    text-align: center;
    padding-bottom: 1em;
}

.container__description .normal{
    text-align: center;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 1em;
}

/*
==========
Styles for navigation menu in mobile 900px.
==========
*/

@media screen and (max-width: 900px){
    .container__description{
        width: 100%;
        height: auto;
    }
}

/*
==========
Styles for navigation menu in mobile 700px.
==========
*/

@media screen and (max-width: 700px){
    .container__description{
        width: 100%;
        height: auto;
    }

    .container__description .title__two{
        color: var(--blue-color);
        text-align: center;
        font-size: 2em;
    }
}

/*
==========
Styles for navigation menu in mobile 400px.
==========
*/

@media screen and (max-width: 400px){
    .container__description{
        width: 100%;
        height: auto;
    }
}

/*
==========
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;
    }
}