* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 100%;
    font-weight: 500;
}
 

html,body{
    scroll-behavior: smooth;
}

:root {
    --primary-color: #728c69;
    --secondary-color: #fcf3e5;
    --purple-color: #654e9f;
}

@media(max-width:992px){
    :root{
        font-size: 15px;
    }
}

@media(max-width:576px){
    :root{
        font-size: 14px;
    }
}


body {
    font-family: Arial, Helvetica, sans-serif;
    font-optical-sizing: auto;
    background-color: var(--secondary-color);
}

body, a, button, input, textarea, select {
    cursor: url('../img/icone-olive-01.png'), auto;
}


a {
    color: inherit;
    text-decoration: none;
}

.container-fluid {
    padding: 0 2rem;
    padding-right: 2rem;
}

@media(max-width:992px){
    :container-fluid{
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* =========== Header =========== */

header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 6rem;
    padding: 0 2rem;
    font-size: 1.5rem;
    color: var(--primary-color);
    z-index: 100;
    background-color: var(--secondary-color);
}

@media(max-width:992px){
    :header{
        padding: 0 1.5rem;
    
    }
}



.different {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 8rem;
    padding: 0 2rem;
    font-size: 1.5rem;
    color: var(--primary-color);
    z-index: 100;
}

header .logo {
    display: flex;
    align-items: center;

}

header .logo img {
    display: inline-block;
    margin-right: .5rem;
    width: 8rem;
    height: auto;
}

@media(max-width:576px){
    header .logo img{
        width: 6rem;
    }
    header nav ul li{
    padding-top: 1rem;
    }
}


header nav ul {
    display: flex;
    list-style: none;
}

header nav ul li {
    margin-left: 1.5rem;
}

header nav ul li a:hover {
    transition: border 0.1s;
    color: var(--purple-color);
}

header nav ul li a:hover {
    border-bottom: 2px solid var(--purple-color);
}

h1 {
    display: inline-block;
    width: 10rem;
    height: auto;
}

/* =========== Main =========== */


main.home {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 2rem;
    height: calc(var(--vh, 1vh) * 100);

}


main.home img{
    width: 100%;
    height: auto;
    display: block;
}

main.portfolio {
    background-color: var(--secondary-color);
}

@media(max-width:992px){

    main.home{
        height: 40vh;
    }

    main.home img{
        width: 95%;

    }

    main.portfolio{
        padding: 0 0.5rem;
        padding-top: 4rem;
    }

    main.single{
    padding-top: 2rem;
    }

}

main.single {
    padding-top: 2rem;
}

/* =========== Portfolio =========== */

.work {
    margin-top: 2rem;
}

.project-card {
    color: var(--primary-color);
    border-top: 1px solid var(--primary-color);
    padding-top: 20px;
    padding-bottom: 20px;
    align-items: center;
}


.project-card a:hover {
    transition: border 0.1s;
    color: var(--purple-color);
}

.project-title {
    font-size: 2rem;
    font-weight: bold;
    text-align: left;
}

.project-year {
    font-size: 1.25rem;
    text-align: right;
    color: var(--purple-color);
}

.project-category {
    font-size: 1.25rem;
    text-align: left;
    color: var(--purple-color);
}

/* =========== Projects Portfolio =========== */


.single-info {
    position: sticky;
    padding-top: 8rem;
    top: 2rem;
    color: var(--primary-color);
}

.single-title {
    font-size: 2.5rem;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 2rem;
    color: var(--purple-color);
}

.single-academic {
    font-size: 1.3rem;
    opacity: 70%;
}

.single-area {
    font-size: 1.3rem;
    margin-top: 0.2rem;
    color: var(--purple-color);
}



.single-year {
    font-size: 1.3rem;
    margin-top: 0.2rem;
    margin-bottom: 2rem;
    color: var(--purple-color);
}

.single-team {
    font-size: 1.3rem;
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
    text-decoration: underline;
}

.single-member{
    line-height: 1.5rem;
    margin-bottom: 2rem;
}

.single-text {
    border-top: 1px solid var(--primary-color);
    padding-top: 10px;
    padding-right: 2rem;
    line-height: 1.4rem;
    font-size: 1rem;
}

.single-images {
    list-style: none;
    padding-top: 8rem;
    padding-bottom: 2rem;
    padding-left: 0; 
}




.single-image + .single-image {
    margin-top: 2rem;
}

.single-image img {
    width: 100%;
    height: auto;
    display: block;
}

.arrow-container {
    display: flex;
    justify-content: start;
    margin-top: 4rem;
    padding-bottom: 1rem;
}
.arrow {
    width: 30px;
    height: auto;
    margin: 0 40px;
    margin-left: 0;
}

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


.carousel {
    font-size: 4vw;
    color: var(--purple-color);
    overflow: hidden;
    width: 98%;
    max-width: 1450px;
    background-color: var(--secondary-color);
    position: relative;
    margin: 2rem; 
    padding-top: 5rem;
    padding-bottom: 2rem;
}

.carousel-track {
    display: flex;
    animation: scroll 20s linear infinite;
}

.carousel-item {
    font-weight: bold;
    min-width: 30%;
    box-sizing: border-box;
    padding: 50px;
    text-align: center;
}

@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

@media(max-width:576px){
    .carousel{
        font-size: 8vw;
        margin-left: 3rem; 
        padding-top: 1rem;
        padding-bottom: 2rem;
        padding-right: 2rem;
        height: 120px;
        width: 75%;
        max-width: 500px;

    }

    .carousel-item {
        padding: 40px;
        padding-right: 180px;
    }

    .carousel-track {
        display: flex;
        animation: scroll 8s linear infinite;
    }
}


/* =========== About =========== */

main.about{
    padding-top: 10rem;
}

.about-text{
    font-size: 2.5rem;
    color: var(--purple-color);
}

.about-text-quote{
    padding-top: 1rem;
}


@media(max-width:576px){
    .about-text{
        font-size: 1.5rem;
    }
}

.section-title{
    font-size: 1.3rem;
    padding-top: 5rem;
    color: var(--primary-color);
}

.section-content{
    font-size: 1.3rem;
    padding-top: 5rem;
    color: var(--primary-color);
}

@media(max-width:576px){
    .section-content{
        padding-bottom: 1rem;
        padding-top: 1rem;
    }

    .section-title{
        padding-bottom: 2rem;
    }

    .about-text-quote{
        padding-bottom: 4rem;
    }

}

.section-content a:hover{
    transition: border 0.1s;
    color: var(--purple-color);
}


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

footer {
    margin-top: 4rem;
    padding-top: 2rem;
    background-color: var(--primary-color);
    color: var(--secondary-color);
    padding-bottom: 2rem;
}

@media(max-width:992px){
    :footer{
        padding: 0 1.5rem;
    }
}

footer ul {
    list-style: none;
}

.social2{
    text-align: end;
}

.social1{
    text-align: start;
}


@media(max-width:576px){
    .social1{
        text-align: start;
        padding-top: 1rem;
    }

    .social2{
        text-align: start;
    }


}