* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

:root {
    --font-title-h1: 'Unbounded', cursive;
    --font-paragraph: 'Manrope', sans-serif;
    --primary-color: #1c1c1d;
    --scnd-color: #00ffbf;
    --body-color:#f8fefe;
}

html {
    scroll-behavior: smooth;
    cursor: none;
}

body {
    background-color: var(--body-color);
    cursor: none;
    overflow-x: hidden;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
    font-family: var(--font-paragraph);
    font-weight: 300;
    font-size: 20px;
    letter-spacing: 0.5px;
    color: var(--primary-color);
    cursor: none;
}

h1 {
    font-family: var(--font-title-h1);
    font-size: 5vw;
    font-weight: 400;
    margin-bottom: 75px;
}

h3 {
    font-family: var(--font-paragraph);
    font-size: 16px;
    font-weight: 300;
    letter-spacing: .2px;
    color: var(--body-color);
}

.reveal {
    transform: translateY(50px);
    opacity: 0;
    transition: all 1s ease-in-out;
}

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

/* -------- SNACKBAR -----------*/

.snackbar {
    position: fixed;
    top: 0;
    width:100%;
    height:90px;
    z-index: 2;
}

#gradientCanvasMain {
    width:100%;
    height:90px;
    --gradient-color-1: #F9E6BA; /*yellow*/
    --gradient-color-2: #B69DF0; /*purple*/
    --gradient-color-3: #FF93FE; /*pink*/
    --gradient-color-4: #BEF8F1; /*blue*/ 
    z-index: 2;
  }
  
  @keyframes gradient {
      0% {
          background-position: 0% 50%;
      }
      50% {
          background-position: 100% 50%;
      }
      100% {
          background-position: 0% 50%;
      }
  }


.snackbar_items {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 3;
    width: 100%;
    mix-blend-mode: difference;
}

.snackbar_items .text {
    line-height: 24px;
    color: var(--body-color);
    z-index: 10000;
}

.link_bold {
    font-weight: 600;
    text-decoration: underline;
}

.little {
    font-size: 14px;
    margin-left: 5px;
    transition: all .5s;
}

.snackbar:hover .little {
    transform: translateX(5px);
}

/* ----------------------------- START/ CUSTOM CURSOR --------------------------------*/

.inner-cursor {
    position: fixed;
    left: 10px;
    width: 10px;
    height: 10px;
    transform: translate(-50%, -50%);
    background-color: #fff;
    mix-blend-mode: difference;
    border-radius: 50%;
    pointer-events: none;
    transition: width 0.5s, height 0.5s;
    z-index: 4;
}

.inner-cursor.grow {
    width: 60px;
    height: 60px;
    transition: width 0.5s, height 0.5s;
}

/* ----------------------------- END/ CUSTOM CURSOR --------------------------------*/


/* ----------------------------- START/ PROGRESSBAR --------------------------------*/
  
.back-to-top {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    background-color: var(--primary-color);
    right: 2rem;
    bottom: 2rem;
    height: 100px;
    width: 100px;
    border-radius: 100%;
    opacity: 100%;
    transition: .4s all cubic-bezier(.68,-0.55,.27,1.55);
    border: 1px solid var(--body-color);
  }

.top {
    color: var(--body-color);
    font-size: 1.6rem;
    font-weight: 400;
    font-family: var(--font-title-h1);
    text-transform: uppercase;
  }

.back-to-top:hover {
    transform: scale(1.1);
  }
  
.hidden {
    opacity: 100%;
  }
  
#scroll-progress {
    position: fixed;
    top: 0;
    width: 0%;
    height: 4px;
    background: var(--scnd-color);
    z-index: 3;
  }
  
/* ----------------------------- END / PROGRESSBAR --------------------------------*/

.container {
    max-width: 1400px;
    margin: 0 auto;
}

/* ----------------------------- START/ NAVBAR --------------------------------*/



#navbar {
    width: 100%;
    position: fixed;
    background-color: var(--body-color) ;
    height: 90px;
    top: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    transition: top .5s cubic-bezier(.68,0,0,.51);
}

.nav_content {
    margin-left: auto;
    margin-right: auto;
    max-width: 1400px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.nav_logo {
    height: 50px;
    width: 50px;
}

.nav_logo img {
    height: 100%;
}

.links {
    display: flex;
    align-items: center;
    gap: 25px;
}

.action_btn{
    border: 1px solid var(--primary-color);
    background: none;
    padding: 0.75rem 1.25rem;
    font-size: 20px;
    font-weight: 300;
    letter-spacing: 0.5px;
    font-family: var(--font-paragraph);
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    display: inline-block;
}

.btn{
    color: var(--primary-color);
}

.btn:hover{
    color: var(--primary-color);
  }

.action_btn::before{
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 0%;
    background: var(--scnd-color);
    backdrop-filter: blur(10px);
    z-index: -1;
    transition: .5s all cubic-bezier(.68,-0.55,0,.51);
}

.btn::before{
    bottom: 0;
    border-radius: 40% 40% 0 0;
}

.btn:hover::before{
    height: 60%;
}

/* ----------------------------- END / NAVBAR --------------------------------*/

/* ----------------------------- START / HERO --------------------------------*/

.hero {
    width: 100%;
    height: auto;
    padding: 200px 0 200px 0;
}

.text {
    font-family: var(--font-paragraph);
    font-size: 20px;
    line-height: 28px;
    font-weight: 300;
    letter-spacing: 0.5px;
    color: var(--body-color);
}

.w75 {
    width: 75%;
}

.w70 {
    width: 70%;
}

.hero_items {
    margin-top: calc(200px - 90px);
}

.hero_items .text {
    margin-bottom: 75px;
}

.img_absolute {
    z-index: 2;
    position: absolute;
    top: -20%;
    right: 0;
    transform: translate(50%, -50%);
    width: 40%;
}

/* ----------------------------- END / HERO --------------------------------*/

/* ----------------------------- START / PORTFOLIO --------------------------------*/

.portfolio {
    background-color: var(--primary-color);
    height: auto;
    padding: 100px 0;
    position: relative;
}

.menu {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: 100px;
}

.title_col {
    margin: 100px 0;
    letter-spacing: 0.5px;
    color: var(--body-color);
}

.title {
    font-family: var(--font-title-h1);
    line-height: 50px;
    color: var(--body-color);
    font-size: 40px;
    font-weight: 400;
    letter-spacing: .2px;
    margin-bottom: 50px;
}

.menu a {
    color: var(--body-color);
}

.menu_item {
    width: max-content;
    padding: 10px 0;
}

.menu_item-image_wrapper {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 400px;
    pointer-events: none;
    opacity: 0;
}

.menu_item-image_inner .menu_item-image {
    position: absolute;
    border-radius: 30px;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.menu_item-text {
    font-family: 'Unbounded', cursive;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 3.9vw;
    line-height: 1.3;
    white-space: nowrap;
    position: relative;
    opacity: 1;
    transition: opacity 350ms ease;
    white-space: nowrap;
    overflow: hidden;
}

/* ---------------- HOVER / PORTFOLIO ------------------*/

.menu_item-text:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
  }

.menu_item:hover .menu_item-text {
    color: var(--scnd-color);
}

.menu_item:hover .menu_item-image_wrapper {
    z-index: -2;
  }
  

/* ----------------------------- END / PORTFOLIO --------------------------------*/

/* ----------------------------- START / SKILLS --------------------------------*/


.skills {
    height: auto;
    padding: 100px 0 200px 0;
    display: flex;
}

.skills .title {
    margin-bottom: 0;
}

.description .title {
    margin-bottom: 0;
}

.block_left {
    width: 50%;
    height: 100%;
}

.block_right {
    width: 50%;
    height: 100%;
}

.dark {
    color: var(--primary-color);
}

/* ----------------------------- END / SKILLS --------------------------------*/

/* ----------------------------- START / SERVICES --------------------------------*/

.header_services {
    background-color: var(--primary-color);
    padding: 150px;
    border-radius: 20px;
    text-align: center;
}

.title span {
    color: var(--scnd-color);
}

.item {
    display: flex;
    gap: 60px;
    margin: 200px 0;
    justify-content: space-between;

}

.text_mb {
    margin-bottom: 50px;
}

.mt0 {
    margin-top: 0;
}

.col_left {
    width: 50%;
}

.col_right {
    height: auto;
    width: 40%;
}

.col_right img {
    height: auto;
    width: auto;
    border-radius: 20px;
    object-fit: cover;
}

.item:nth-child(2) {
    flex-direction: row-reverse;
}

.item:last-child {
    margin-bottom: 300px;
}

/* ----------------------------- START / CLIENTS --------------------------------*/

.clients {
    background-color: aliceblue;
}

.blocks {
    display: flex;
    align-items: start;
    height: auto;
    padding: 100px 0;
}

.blocks .block_left {
    width: 35%;
    margin-right: auto;
}

.blocks .block_right {
    width: 50%;
}

.blocks .title {
    margin-bottom: 0;
}


.blocks .title_col {
    margin: 0 0 100px 0;
}

/* ----------------------------- END / CLIENTS --------------------------------*/

/* ----------------------------- START / FOOTER --------------------------------*/
.footer {
    height: 100%;
    margin: 300px 0 0 0;
}

.contact_items {
    display: flex;
    height: auto;
    flex-direction: row-reverse;
    gap: 60px;
    margin-bottom: 150px;
}

.item_contact {
    padding: 50px ;
    width: 50%;
    height: 500px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
}

.subtitle {
    margin-bottom: auto;
}

.item_contact .title {
    margin-bottom: auto;
}

.item_contact .action_btn, .item_contact .action_btn_light {
    justify-content: flex-start;
    margin-right: auto;
}

.question {
    background-color: var(--primary-color);
}

.question .text {
    margin-bottom: auto;
}

.projet {
    justify-content: space-between;
    background-color: var(--scnd-color);

}

.light {
    color: var(--body-color);
}

.next {
    display: inline-block;
    font-family: var(--font-title-h1);
    font-weight: 400;
    transition: .6s all cubic-bezier(.68,-0.55,.27,1.55);
    line-height: 50px;
    font-size: 40px;
    letter-spacing: .2px;
}

.next:hover {
    font-weight: 600;
}

.contact_btn {
    border: 1px solid var(--primary-color);
    padding: 0.75rem 1.25rem;
    font-size: 20px;
    font-weight: 300;
    letter-spacing: 0.5px;
    font-family: var(--font-paragraph);
    border-radius: 10px;
    display: inline-block;
    margin-right: auto;
    transition: .5s;
}

.contact_btn:hover {
    padding: 0.75rem 1.75rem;
}

.btn_light {
    color: var(--body-color);
    border: 1px solid var(--body-color);
}

.footer_nav {
    background-color: var(--primary-color);
}

.footer_links {
    font-family: var(--font-paragraph);
    font-weight: 300;
    font-size: 16px;
    letter-spacing: 0.5px;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

.links_nav {
    display: flex;
    gap: 60px;
    padding: 30px 0;
}

.links_nav li, .links_nav a {
    color: var(--body-color);
    font-family: var(--font-paragraph);
    font-weight: 300;
    font-size: 16px;
    letter-spacing: 0.5px;
}

/* ----------------------------- END / FOOTER --------------------------------*/


/* ----------------------------- START / PROJETS --------------------------------*/

.heading_1 {
    background-image: url(ASSETS/IMG/PROJETS/FREEDOM-CAMPER/header.webp);
}

.heading_2 {
    background-image: url(ASSETS/IMG/PROJETS/STMICRO/header.webp);
}

.heading_3 {
    background-image: url(ASSETS/IMG/PROJETS/PATAPAIN/header.webp);
}

.heading_4 {
    background-image: url(ASSETS/IMG/PROJETS/POGEIS/header.webp);
}

.heading_5 {
    background-image: url(ASSETS/IMG/PROJETS/NATURE-FRANCE/header.webp);
}

.heading_6 {
    background-image: url(ASSETS/IMG/PROJETS/AGENCE-DU-CHATEAU/header.webp);
}

.heading_7 {
    background-image: url(ASSETS/IMG/PROJETS/ADDIBIZZ/header.webp);
}


/* ----------------------------- END / PROJETS --------------------------------*/


/* ----------------------------- START / PAGE FREEDOM CAMPER --------------------------------*/


.parallax {
    min-height: 50vh;
    width: 100%;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.description {
    height: 100%;
    display: flex;
    margin-bottom: 200px;
    gap: 60px;
}

.description .block_left {
    height: auto;
}

.description_items {
    margin-bottom: 50px;
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.tags li h3 {
    color: var(--primary-color);
    padding: 0.5rem 1.5rem;
    border: var(--primary-color) 1px solid;
    border-radius: 30px;
}

.bold {
    font-weight: 600;
}

.study_case {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
}

.study_case .flex_row {
    margin-bottom: 100px;
}

.study_case img {
    aspect-ratio: auto 2200/1279;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    margin-bottom: 100px;
    border-radius: 20px;
}

.study_case video {
    border-radius: 20px;
    margin-bottom: 100px;
}

.main_study_case {
    display: flex;
    gap: 40px;
    margin-bottom: 200px;
}

.study_case_main_title {
    margin: 200px auto;
    text-align: center;
    font-family: var(--font-title-h1);
    line-height: 50px;
    color: var(--primary-color-color);
    font-size: 40px;
    font-weight: 400;
    letter-spacing: .2px;
}

.main_study_case .block_left {
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main_study_case .block_right {
    height: auto;
}

.block_left img {
    margin-top: 100px;
    width: 50%;
}


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

.next_project {
    text-align: center;
    margin-bottom: 300px;
}

.outro {
    border-top: var(--primary-color) 1px solid;
    border-bottom: var(--primary-color) 1px solid;
    text-align: center;
}

.outro .title {
    margin-top: 50px;
}


/* ----------------------------- START / RESPONSIVE --------------------------------*/

@media (max-width: 1700px) {
    .img_absolute {
        right: 10%;
    }

    .menu_item-text {
        font-size: 5vw;
    }
}

@media (max-width: 1400px) {
    .container {
        padding: 0 50px;
    }

    .nav_content {
        padding: 0 50px;
    }

    .hero {
        padding-bottom: 200px;
    }
    .hero_items {
        margin-top: 300px;
    }

    .menu_item-text {
        font-size: 6.5vw;
    }

    .skills {
        margin: 100px 0 200px 0;
    }

    .blocks .block_left {
        margin-top: 100px;
    }

    .blocks .block_right {
        margin-bottom: 100px;
    }

    .blocks .title {
        margin-bottom: 100px;
    }

    .blocks .title_col {
        margin-top: 100px ;
    }

    .img_absolute {
        top: -20%;
        right: 20%;
        transform: translate(50%, -50%);
        width: 40%;
    }

    .parallax {
        display: none;
    }

    .description {
        margin-top: 100px;
    }

    .next {
        font-size: 4vw;
    }
}

@media (max-width: 1150px) {

    .back-to-top {
        bottom: 6rem;
    }

    .header_services {
        padding: 100px;
    }

    h1 {
        font-size: 7vw;
    }

    .w70 {
        width: 80%;
    }

    .hero {
        padding-bottom: 150px;
    }

    .img_absolute {
        width: 40%;
    }

    .menu_item-text {
        font-size: 5.5vw;
    }

    .portfolio {
        padding: 50px 0;
    }

    .skills {
        margin-top: 50px;
    }

    .skills, .description {
        flex-direction: column;
        padding-top: 50px;
    }

    .item {
        gap: 0;
    }

    .item, .item:nth-child(2) {
        flex-direction: column-reverse;
        margin: 150px 0;
    }

    .col_right {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .col_right img {
        width: 60%;
    }

    .description .block_left, .block_left, .block_right, .col_left, .col_right  {
        width: 100%;
    }

    .text_content {
        align-items: center;
    }

    .text_content p{
       text-align: center;
    }

    .blocks {
        flex-direction: column;
    }

    .blocks .block_left {
        width: 100%;
        margin-top: 100px;
    }

    .blocks .block_right {
        width: 100%;
        margin-bottom: 100px;
    }

    .blocks .title {
        margin-bottom: 0px;
    }

    .contact_items {
        margin: 100px 0;
        flex-direction: column-reverse;
    }

    .item_contact {
        width: 100%;
    }

    .next {
        font-size: 4.5vw;
    }

    .main_study_case {
        flex-direction: column;
    }
}


@media (max-width: 1085px) {

    .back-to-top:hover {
        transform: scale(1);
    }

      .snackbar:hover {
        background-color: #7362b6;
    }
      .snackbar:hover .little {
        transform: none;
    }
    
    .w75, .w70 {
        width: 100%;
    }

    .inner-cursor {
        display: none;
    }  

    .menu_item-text {
        font-size: 6vw;
    }   

    .btn:hover::before {
        display: none;
    }

    .contact_btn:hover {
        padding: 0.75rem 1.25rem;
    }

    .menu_item:hover .menu_item-text {
        color: var(--body-color);
    }

    .menu .menu_item-text {
        color:#7fffdf;
    }

    .menu:hover .menu_item-text {
        color: #7fffdf;
    }

    .menu_item-image_inner {
        display: none;
    }

    .parallax {
        display: none;
    }

    .next:hover {
        font-weight: 400;
    }
}

@media (max-width: 768px) {

    .back-to-top {
        display: none;
    }

    .snackbar_items .text {
       font-size: inherit;
    }

    .header_services {
        padding: 50px;
    }

    .w75 {
        width: 100%;
    }

    .w70 {
        width: 100%;
    }

    .img_absolute {
        width: 60%;
        top: -25%;
        right: 35%;
    }

    .menu_item-text {
        font-size: 5.5vw;
    }

    .next {
        font-size: 7vw;
    }

    .links_nav {
        flex-direction: column;
        padding: 50px 0;
        gap: 20px;
    }

    .links_nav li, .links_nav a {
        font-size: 20px;
    }

    .study_case img {
        margin-bottom: 40px;
    }

    .study_case video {
        margin-bottom: 40px;
    }

    .next_project {
        margin-bottom: 200px;
    }

    .main_study_case .block_left img {
        width: 80%;
    }

    .colors {
        flex-direction: column;
    }

    .footer {
        margin-top: 200px;
    } 
}

@media (max-width: 630px){

    .title {
        font-size: 7vw;
    }

    .hero_items {
        margin-top: 275px;
    }
    .col_right img {
        width: 100%;
    }

    .description {
        margin-top: 25px;
    }

    .menu_item {
        padding: 0;
    }
}



@media (max-width: 480px) {

    .container {
        padding: 0 25px;
    }

    h1 {
        font-size: 9vw;
    }

    .header_services {
        padding: 35px;
    }

    .hero {
        padding-bottom: 150px;
    }

    .hero_items {
        margin-top: 250px;
    }

    .hero_items .text {
        margin-bottom: 75px;
    }

    .img_absolute {
        width: 70%;
        top: -25%;
    }

    .title {
        font-size: 7vw;
        line-height: 40px;
    }

    .title_col {
        margin: 50px 0;
    }

    .portfolio {
        padding-bottom: 75px;
    }

    .col_left .title_col {
        margin-top: 0;
    }

    .portfolio .menu {
        margin-bottom: 0;
    }

    .portfolio .title_col {
        margin-top: 25px;
    }

    .block_left {
        margin-bottom: 50px;
    }

    .menu_item-text {
        font-size: 5.8vw;
        line-height: 40px;
    }

    .skills {
        margin-bottom: 150px;
    }

    .description {
        padding-top: 100px;
    }

    .main_study_case {
        margin-bottom: 150px;
        gap: 40px;
    }

    .main_study_case .block_left {
        margin-bottom: 0;
    }

    .main_study_case img {
        margin-top: 25px;
    }

    .main_study_case .title_col {
        margin-top: 0;
    }

    .next_project {
        margin-bottom: 150px;
    }

    .next {
        font-size: 9vw;
    }

    .blocks .block_right {
        margin-bottom: 50px;
    }

    .blocks .block_left {
        margin-top: 50px;
    }

    .blocks {
        margin-bottom: 150px;
    }

    .blocks .block_right .title_col {
        margin: 50px auto 50px auto;
    }

    .footer {
        margin-top: 100px;
    }

    .item_contact {
        padding: 35px;
    }

    .contact_items {
        gap: 40px;
    }

    .items .item:last-child {
        margin-bottom: 150px;
    }

    .description .block_right .title_col {
        margin-top: 0;
    }
}

@media (max-width: 360px) {
    .text {
        font-size: 16px;
        line-height: 22px;
    }

    .img_absolute {
        width: 70%;
        right: 25%;
        top: -25%;
    }
    .item, .item:nth-child(2) {
        margin: 75px 0;
    }

    .title {
        font-size: 7vw;
    }

    .subtitle {
        margin-bottom: 50px;
    }

    .description {
        padding-top: 100px;
        margin-bottom: 100px;
    }

    .next_project {
        margin-bottom: 100px;
    }

    .contact_btn {
        font-size: 18px;
    }
    .contact_btn:hover {
        display: none;
    }
    
    .links {
        gap: 15px;
    }
}