@font-face {
    font-family: 'CabinetGrotesk';
    src: url('font/CabinetGrotesk-Variable.ttf') format('truetype');
    font-weight: 100 900; /* Range of available weights */
  }
  

body {
    font-family: 'CabinetGrotesk', sans-serif;
    font-weight: 200;
    margin: 0;
    padding: 0;
    background: white;
    text-align: center;
    overflow-x: hidden;
}

.nav {
    position: absolute;
    top: 25px;
    right: 25px;
    font-size: 18px;
}

.nav a {
    margin-left: 20px;
    letter-spacing: 3px;
    text-decoration: none;
    color: black;
    text-transform: lowercase;
    position: relative;
    z-index: 1;
}


.nav a:hover{
    font-weight: 500;
}


/*------------------LANDING PAGE-----------------------*/

/*#page1{  */
/*	background-image: url("background-painting.png");*/
/*  	background-size : cover;*/
/*  	background-repeat: no-repeat;*/
/*  	background-attachment: fixed;*/
/*}*/

/*#flashlight {*/
/*  z-index: 0;*/
/*  --Xpos: 50vw;*/
/*  --Ypos: 50vh;*/
/*}*/

/*#flashlight:before {*/
/*  content: "";*/
/*  display: block;*/
/*  width: 100%;*/
/*  height: 100%;*/
/*  position: absolute;*/
/*  background: radial-gradient(*/
/*    circle 7em at var(--Xpos) var(--Ypos),*/
/*    rgba(0, 0, 0, 0),*/
/*    rgba(255, 255, 255, 1)*/
/*  );*/
/*}*/


.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    position: relative;
    z-index: 1;
}

#background-image {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('background-painting.png') center/cover no-repeat;
}

canvas {
    position: absolute;
    width: 100%;
    height: 100%;
}

.titre-page1 {
    font-size: 65px;
    font-weight: 200;
    letter-spacing: 20px;
    position: relative;
    z-index: 1;
}

.sous-titre-page1 {
    font-size: 40px;
    color: #585858;
    margin-top: -30px;
    letter-spacing: 10px;
    font-weight: 200;
    position: relative;
    z-index: 1;
}

.circle-container {
    margin-top: 50px;
    cursor: pointer;
}

.circle-svg{
    transform: rotate(270deg);
}

.circle {
    fill: none;
    stroke: black;
    stroke-width: .5;
}

.circle-2 {
    fill: none;
    stroke: #F6BF1E;
    stroke-width: 1;
    stroke-dasharray: 440; 
    stroke-dashoffset: 440;
    transition: all 1s ease;
}

svg:hover .circle-2 {
    stroke-dashoffset: 0;
}

svg:hover .circle{
    stroke-width: .5;
}

text {
    font-size: 8px;
    fill: black;
    font-family: 'CabinetGrotesk', sans-serif;
    letter-spacing: 1.5px;
}


/*-------------------HOME PAGE--------------------------*/

.header {
    display: flex;
    justify-content: flex-start;
    padding: 5em 5em 7em 5em;
    text-align: left;
}

.titre-page2 {
    text-transform: uppercase;
    font-weight: 200;
    font-size: 80px;
    max-width: 820px;
}

/* Portfolio Layout */
.portfolio-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 100px;
    padding: 100px 5em;
    justify-content: center;
}

/* Individual Portfolio Item */
.portfolio-item {
    display: flex;
    flex-direction: column;
}

.portfolio-item img {
    max-width: 700px;
    height: auto;
    cursor: pointer;
}

.portfolio-item p {
    font-size: 20px;
    line-height: 1.6;
    font-weight: 300;
    max-width: 600px;
}

.portfolio-item.left {
    display: flex;
    align-items: flex-start;
    text-align: left;
}


.portfolio-item.right {
    display: flex;
    align-items: flex-end;
    text-align: right;
}




/*--------------------PROJECTS TITLES-----------------------------*/

.projects-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 200px;
    padding: 50px 5vw;
}

.header-projects {
    display: grid;
    justify-content: start;
}

.projects-title {
    font-size: 100px;
    text-align: left;
    margin: 0;
    line-height: 1em;
    font-weight: 300;
    padding-left: 0.5em;
}

.opacity {
    opacity: 20%;
    transition: opacity 0.3s;
}

.opacity:hover {
    opacity: 50%;
}

/*--------------------BRANDING-----------------------------*/
.branding-item {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    justify-items: center;
    text-align: center;
}

.image-box {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    max-width: 800px;
    justify-items: center;
}

.image-box img,
.image-box video {
    max-width: 100%;
    height: 100%;
}

/* Door + Video Aligned Horizontally */
.door-video-container {
    display: grid;
    grid-template-columns: auto auto auto;
    align-items: center;
    gap: 10px;
}

.text-box {
    font-size: 1.2rem;
    line-height: 1.5;
    max-width: 500px;
    padding: 1em;
}

.text-box.left {
    text-align: left;
    grid-column: 2;
    grid-row: 1;
}

.text-box.right {
    text-align: right;

}


.image-box-1 {
    display: grid;
    /* grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto; */
    gap: 10px;
    max-width: 900px;
    justify-content: center;
}

.image-box-1 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.main-visu1 {
    grid-column: 1 / span 2;
}

.illu {
    grid-column: 1 / span 1;
}

.mockup {
    grid-column: 2 / span 1;
}

.other1 {
    grid-column: 1 / span 1;
}

.other2 {
    grid-column: 2 / span 1;
}

.colors {
    grid-column: 1 / span 2;
}



/*-----------------ILLUSTRATIONS-----------------------------*/

.illustrations-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    justify-items: center;
    text-align: center;
    align-items: end;
}

.image-box-illu {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    max-width: 800px;
    justify-items: center;
}


.image-box-illu img {
    max-width: 100%;
    height: auto;
}

.bd-container{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}


.illustrations-flipbook{
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    align-items: end;
}

.button{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 250px;
    position: relative;
    top: -100px;
}

.button button{
    background: none;
    border: none;
}



#flipbook{
    max-width: 100%;
    height: auto;
}

/*-----------------PRINTS----------------------------*/

.prints-item{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    text-align: center;
    align-items: end; 
    justify-items: center;
}

.image-box-prints {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    max-width: 800px;
    justify-items: center;
}


.image-box-prints img {
    max-width: 100%;
    height: auto;
}

.poster-container{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
}









/* Next Category & Back Home Links */
.next-category, .back-home {
    display: block;
    text-align: center;
    font-size: 1rem;
    text-transform: uppercase;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .3em;
    color: grey;
    transition: color 0.3s;
    margin-top: 25px;
    margin-bottom: 50px;
}

.next-category:hover, .back-home:hover {
    color: black;
}




/*----------------------ABOUT-----------------------*/

/*.about-me{
    margin-left: 20px;
}

.about-me p{
    text-transform: uppercase;
    font-size: 30px;
    text-align: left;
    padding-bottom: 30px;
    margin: 0;
}
*/


.about-me {
    margin: 70px 0 150px 0;
    padding: 0 40px;
    text-align: left;
}

.about-me p {
    font-size: 40px;
    font-weight: 300;
}

.skills-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin: 50px 0 100px 0;
}

/* Skill blocks side by side */
.skills-lists {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
    text-align: left;
}

.skill-block h3 {
    font-size: 18px;
    text-transform: uppercase;
    margin-bottom: 10px;
    font-weight: 300;
}

.skill-block ul {
    list-style: none;
    padding: 0;
}

.skill-block ul li {
    font-size: 18px;
    margin-bottom: 5px;
}

.cv-btn {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid black;
    background: none;
    cursor: pointer;
    font-size: 20px;
    border-radius: 30px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    color: black;
    margin-top: 60px;
}

.skills {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.cv-btn:hover {
    background-color: black;
    color: white;
}

.skills-image {
    width: 100%;
    height: 100%;
    min-height: 350px;
}


.skills-image img{
    width: 500px;
    padding-right: 100px;
}


/* Responsive tweak */
@media (max-width: 768px) {
    .skills-section {
        grid-template-columns: 1fr;
    }

    .skills-lists {
        grid-template-columns: 1fr 1fr;
        gap: 50px;
        padding: 20px 20px 20px 40px;
    }

    .skills-image {
        order: -1;
        min-height: 250px;
    }
    
    .skills-image img{
        width: 350px;
        padding-right: 0;
    }

    .about-me p {
        font-size: 20px;
    }

    .cv-btn {
        margin-left: auto;
        margin-right: auto;
        border-radius: 30px;
        font-size: 18px;
    }
}















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



footer {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 50px 2em;
}

.text-footer {
    font-size: 70px;
    text-align: left;
    line-height: 1em;
    max-width: 600px;
    margin: 0;
}

.contact-container {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 20px;
}

.mail {
    font-size: 40px;
    text-align: left;
}

.socials {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: right;
    text-transform: lowercase;
    letter-spacing: .2em;
    font-size: 20px;
}

.contact-container a {
    text-decoration: none;
    color: black;
}

.contact-container a:hover {
    font-weight: 300;
}






    /*----------------MEDIAQUERY---------------*/


    /* Responsive Design */
@media (max-width: 1024px) {
    .header {
        padding: 5em 2em;
    }

    .titre-page2 {
        font-size: 60px;
    }

    .portfolio-container {
        padding: 50px 2em;
    }

    .portfolio-item img {
        max-width: 100%;
    }

    .portfolio-item p {
        font-size: 18px;
    }

    .text-footer {
        font-size: 50px;
    }

    .mail {
        font-size: 30px;
    }
}



@media (min-width: 768px) {
    .branding-item {
        grid-template-columns: 1fr 1fr;
        text-align: left;
    }
    .branding-item.right {
        grid-template-columns: 1fr 1fr;
    }
    .text-box {
        text-align: left;
    }
    
    
}

@media (max-width: 768px) {

    .projects-title{
        font-size: 77px;
    }

    .branding-item {
        font-size: 18px;
        width: 100%;
    }
    
    .text-box.right, .text-box.left{
        text-align: left;
        grid-column: 1;
    }

    .image-box-1 {
        grid-template-columns: 1fr;
    }

    .image-box-1 img {
        grid-column: auto !important;
    }
    
    .illustrations-item{
        grid-template-columns: 1fr;
    }
    
    .prints-item{
        grid-template-columns: 1fr;
    }
    
    .poster-container{
        grid-template-columns: 1fr 1fr;
    }
    
    .button{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
    top: -70px;
    }
    
    #flipbook{
    max-width: 100%;
    height: auto;
    }

}



@media (max-width: 480px) {
    /* Styles for mobile phones */


    .nav{
        right: 15px;
    }
    
    /*LANDING PAGE*/
    .container{
        height: 80vh;
    }

   .titre-page1{
       font-size: 40px;
       padding-left: 20px;
   } 
   
   .sous-titre-page1{
       font-size: 20px;
   }
   
   /*HOMEPAGE*/
    .titre-page2 {
        font-size: 50px;
    }

   /*FOOTER*/
   .footer{
    width: 50%;
   }
    .text-footer {
        font-size: 35px;
    }

    .contact-container{
        grid-template-columns: 1fr;
        gap: 10px;
    }


    .socials{
        text-align: left;
        gap: 0;
    } 
    
    /*PROJECTS TITLES*/
    .projects-container{
        padding-top: 15px;
        padding-bottom: 15px;
    }
    
    .header-projects{
        justify-content: center;
    }

    .projects-title{
        font-size: 55px;
        padding-left: 0;
    }

    .next-category{
        margin-bottom: 0;
    }
    
    /*BRANDING*/
    .image-box img{
        max-width: 100%;
        height: auto;
    }
    
    .image-box-1 img{
        max-width: 100%;
        height: auto;
    }
    
    
    /*ILLUSTRATIONS*/
        
    
    
    
}



.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}







/*------------------MOTION DESIGN----------------------------*/

.tv-container {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 30px;
  /*padding: 50px;*/
  max-width: 100%;
  width: 100%;
}


.tv-frame {
  position: relative;
  width: 100%;
  height: auto;
  grid-column: 2;
  margin: 0 auto;
}

.tv-img {
  width: 100%;
  height: auto;
  /*display: block;*/
}

#tv-video {
  position: absolute;
  top: 30%;
  left: 9%;
  width: 63%;
  height: 52%;
  object-fit: cover;
  border-radius: 15px;
}


.arrow {
  background: none;
  border: none;
  font-size: 60px;
  cursor: pointer;
  transition: transform 0.3s;
}

.arrow:hover {
  transform: scale(1.1);
}

.arrow-group {
  display: none; /* Hidden on desktop */
}


@media (max-width: 768px) {
      .tv-container {
        grid-template-columns: 1fr;
        width: 100%;
        height: auto;
        margin: 0 auto;
      }

      .arrow {
        display: none; /* Hide side arrows */
      }
  
  
    .arrow-group {
        display: flex;
        justify-content: center;
        margin-top: 20px;
    }

      .arrow-group .arrow {
        display: block;
      }

      .tv-frame {
        grid-row: 1;
        grid-column: 1;
        margin: 0 auto;
      }
      
      .tv-img {
          width: 100%;
          height: auto;
          display: block;
          margin: 0 auto;
          float: none;  
        }
      
      .motion-design-container{
            gap: 20px;
            margin: 0 auto;
      }
      
      .motiondesign-title{
          font-size: 48px;
      }
      
      .motion-design-header{
          justify-content: flex-start;
      }

}