/* Body styles */
html {
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    background-color: black;
    background-image: url('VISUELS/typos/bckgrnd.png');
    overflow-x: hidden;
    font-family: 'Helvetica neue';
}


.temporary {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100vh;
        margin: 0;
        font-family: Arial, sans-serif;
    }

.temporary img {
        filter: invert(100%);
        max-width: 47vh;
        padding-bottom: 2vh;
    }

.temporary .main-ideas {
        color: white;
        font-size: 4vh;
        font-weight: bold;
        margin: 10px 0;
        padding-bottom: 5vh;
    }

.temporary .email {
        color: white;
        font-size: 2.5vh;
    }


/*OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO*/
/* BURGER MENU */




.burger-menu {
    position: fixed;
    top: 4.5vh;
    right: 4.5vh;
    width: 6vh;
    height: 6vh;
    background-color: none;
    z-index: 10;
    cursor: pointer;
}

/* design burger menu */
.burger-menu-icon {
    position: relative;
    margin: 0 auto;
    background-color: white;
    width: 4.3vh;
    height: 0.4vh;
    top: 3vh;
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.8);
    transition: .2s;
}

.burger-menu-icon::before,
.burger-menu-icon::after {
    content: "";
    position: absolute;
    width: 4.3vh;
    height: 0.4vh;
    background-color: white;
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.8);
    transition: .2s;
}
.burger-menu-icon::before {top: -1.5vh;}
.burger-menu-icon::after {bottom: -1.5vh;}

/* subdivision menu */
.burger-menu-options {
    display: none;
    position: fixed;
    top: 9vh;
    right: 6vh;
    background-color: none;
    z-index: 10;
}

.burger-menu-options ul {
    list-style: none;
    color: white;
}

.burger-menu-options li:first-child {
    margin-top: 6vh;    
}

.burger-menu-options li {
    font-size: 2vh;
    font-weight: bold;
    text-transform: uppercase;
    margin-top: 2vh;
    text-align: right;
}

.burger-menu-options li a {
    font-size: 4vh;
    font-weight: 700;
    color : white;
    text-decoration: none;
    text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.8);
    transition: .1s;
}

.burger-menu-options li a:hover {
    margin-right: 1vh;
    text-shadow: 0px 0px 7px rgba(0, 0, 0, 1);
}




.burger-menu-icon.active::before {transform: translateY(1.5vh) rotate(45deg);}
.burger-menu-icon.active::after {transform: translateY(-1.5vh) rotate(-45deg);}
.burger-menu-icon.active {background-color: transparent; box-shadow: none;}



@media (max-width: 768px) {
    .burger-menu {
        top: 1vh;
        right: 2vh;
        width: 6vh;
        height: 6vh;
    }
    .burger-menu-icon{
        width: 3vh;
        height: 0.3vh;
        top: 3vh;
    }
    .burger-menu-icon::before,
    .burger-menu-icon::after{width: 3vh; height: 0.3vh;}
    .burger-menu-icon::before {top: -1vh;}
    .burger-menu-icon::after {bottom: -1vh;}
    
    .burger-menu-icon.active::before {transform: translateY(1vh) rotate(45deg);}
    .burger-menu-icon.active::after {transform: translateY(-1vh) rotate(-45deg);}
    .burger-menu-icon.active {background-color: transparent; box-shadow: none;}
    
    .burger-menu-options{top: 8vh;right: 4vh;}
    .burger-menu-options li:first-child {margin-top: 3vh;}
    .burger-menu-options li {margin-right: -2vh;}
    .burger-menu-options li a{font-size: 3vh;}
}









/*OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO*/
/* POPUP */




body {cursor: default;}
body.blurred {cursor: pointer;}
.times-icon:hover {color: orange}
.times-icon::before {content: '×';}


.popuper-pic.active,.popuper-vid.active {display: block;pointer-events: auto;}


.popuper-vid {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    width: 80%;
    height: 80%;
}

.popuper-vid .popuper-content {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

/* Make the iframe responsive and fit to the div's extremities */
.popuper-vid .video-iframe {
    width: 100%;
    height: 100%;
}

.times-icon {
    position: absolute;
    border-radius: 50%;
    top: -11.5vh;
    right: 0;
    font-size: 10vh;
    color: #fff;
    cursor: pointer;
    text-align-last: center;
    text-shadow: 0px 0px 9px rgba(0, 0, 0, 1);
    transition: .2s;
}












/* Styling for the popuper-pic div */
.popuper-pic {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  width: 80%;
  height: 80%;
}

/* Styling for the popuper content */
.popuper-pic .popuper-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%; /* Occupy full height of the popuper-pic div */
}

/* Styling for the image slider container */
.popuper-pic .slider {
  display: flex;
  overflow: hidden;
  width: 100%;
  height: 100%;
  justify-content: center; /* Center the slides horizontally */
  align-items: center; /* Center the slides vertically */
}

/* Styling for the slides container */
.popuper-pic .slides-container {
  display: flex;
  transition: transform 0.3s ease;
}

/* Styling for each slide in the slider */
.popuper-pic .slides-container .slide {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Styling for the images inside the slider */
.popuper-pic .slides-container .slide img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain; /* Ensure images fit inside the container without stretching */
    text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.8);
}

/* Styling for the slider navigation buttons */
/* Styling for the slider navigation buttons */
.popuper-pic .slider-nav {
  display: flex;
  justify-content: center; /* Center the chevrons horizontally */
  align-items: flex-end; /* Align the chevrons at the bottom of the slider */
  margin-bottom: 10px; /* Add margin to create spacing between chevrons and dots */
  /* Position the navigation buttons at the bottom of the popuper-pic div */
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

/* Styling for the previous and next buttons */
.popuper-pic .slider-nav .slider-prev,
.popuper-pic .slider-nav .slider-next {
    padding: .5vh;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  font-size: 4vh;
  text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.8);
  color: #fff; /* Set the chevron color to white */
  display: flex;
  align-items: center;
}

/* Styling for the slider dots */
.popuper-pic .slider-nav .slider-dots {
  display: flex;
  gap: 5px;
  /* Position the dots at the bottom center of the popuper-pic div */
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  color: white; /* Set the color for the dots */
}

/* Styling for each dot in the slider */
.popuper-pic .slider-nav .slider-dot {
  width: 10px;
  height: 10px;
  background-color: rgba(255, 255, 255, 0.7); /* Set a semi-transparent white background for the dots */
  border-radius: 50%;
  cursor: pointer;
}

/* Styling for the active dot */
.popuper-pic .slider-nav .slider-dot.active {
  background-color: #fff;
}   




















/*OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO*/
/* HEADER */


.header {
    background-size: cover;
    background-position: center;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    position: relative;
    scroll-snap-align: start;
}

.header-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    display: flex;
    align-items: center; /* Vertically center the content */
    justify-content: center; /* Horizontally center the content */
}

.header-content {
    z-index: 3;
    font-weight: 700;
    margin-top: auto;
    margin-bottom: auto;
    text-align: center;
    color: white;
    text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.8);
    transform: translateY(-5vh);
    background: none;
}

.header-content img {width: 55vh; filter: invert(100%);}
.header-content h1 {font-size: 3.5vh;}


/* Style each word differently */
.word {
    font-family: xtradex;
    font-size: 4vh;
    padding-right: 5vh;
}

.word:nth-child(2) {
    font-family: courier;
    font-size: 4.95vh;
    padding-right: 3.6vh;
}

.word:nth-child(3) {
    font-family: helvetica;
    font-size: 3.9vh;
    padding-right: 0;
}

@media (max-width: 768px) {
    .header-content img {width: 35vh;}
    .header-content h1 {font-size: 2.4vh;}
    .word {font-size: 3vh;padding-right: 3vh;}
    .word:nth-child(2) {font-size: 3.95vh;padding-right: 1.5vh;}
    .word:nth-child(3) {font-size: 2.95vh;padding-right: 0;}
}









/*OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO*/
/* CMS */


.cms {
    display: flex;
    justify-content: space-between;
    height: 100vh;
    scroll-snap-align: start;
}

.square {
    flex: 1;
    min-width: 100px;
    aspect-ratio: 1; /* Ensures the square aspect ratio */
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
    padding: 3vh; /* Adding padding around the text */
    box-sizing: border-box; /* Ensuring the padding is included in the total height and width */
}

/* Add the white lines between the divs */
.square:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: calc(10%); /* Adjusting the height to consider padding */
    background-color: white;
}

/* Style for the main title */
.square h1 {
    font-size: 10vh;
    margin-bottom: 1vh; /* Adjusting the margin-bottom to add extra space */
}

.square .square_h1 {font-family: xtradex;}
.square .square_h2 {font-family: courier;}

/* Style for the paragraph text */
.square p {
    font-family: "Helvetica", sans-serif;
    font-size: 3vh;
    margin-left: 1vh;
    margin-right: 1vh;
    margin-top: 1vh; /* Adjusting the margin-top to add extra space */
    margin-bottom: 1vh; /* Adjusting the margin-bottom to add extra space */
}

@media (max-width: 1000px) {
    .cms {flex-direction: column;}
    .square h1 {font-size: 8vh;}
    .square p {font-size: 4vh;}
    .square:not(:last-child)::after {
        width: calc(30%); /* Adjusting the width to consider padding */
        height: 2px;
        top: auto;
        bottom: 0;
        right: 50%;
        transform: translateX(50%);
    }
}

@media (max-width: 1200px) {
    .square h1 {font-size: 6vh;}
    .square p {font-size: 2vh;}
}











/*OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO*/
/* US */




.us {
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center; /* Vertically center the container */
    position: relative;
    scroll-snap-align: start;
}

.container {
    height: 90%;
    width: 80%;
    display: flex;
    position: relative; /* Add position relative to make absolute positioning work */
}


.left {flex: 1;}
.right {
    flex: 2;
    display: flex;
    flex-direction: column;
    align-self: flex-end;
    justify-content: flex-end; /* Align items to the bottom */
}

.top {position: relative;align-items: flex-end;}

.bottom {
    border-top: 2px solid white;
    position: relative; 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(10px, 1fr)); 
    grid-gap: 5px; 
    align-items: flex-end; 
}



.left img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1vh;
}   

.title {
    position: absolute;
    top: -9vh;
    left: -1vh; 
    font-size: 6vh;
    font-weight: bold;
    color: white;
    text-transform: uppercase;
    z-index: 1;
    text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.9);
}

.colab-title {
    position: absolute;
    top: -7vh;
    left: -2vh;
    font-size: 10vh;
    transform: rotate(-5deg);
    font-weight: bold;
    color: white;
    font-family: xtradex, Arial, sans-serif;
    text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.9);
}

.colab-description {
    position: absolute;
    bottom: 0; /* Position the colab-description at the top of the top div */
    left: 0; /* Position the colab-description at the left of the top div */
    color: white;
    text-align: justify;
    font-size: 2.4vh;
    font-weight: bold;
    padding-bottom: 2vh;
    padding-left: 2vh;
    padding-right: 2vh;
    margin: 0;
    text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.9);
}

.bottom img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    border-radius: 1vh;
    margin-top: 1vh;
    margin-left: 1vh;
    cursor: pointer;
    transition: .2s;
}

.bottom img:hover {
    opacity: .8;
}



.chevron-left,
.chevron-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-size: 6.5vh;
    text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.9);
    cursor: pointer;
    transition: .2s;
}

.chevron-left:hover,
.chevron-right:hover {
    color: gray;
}

.chevron-left {left: -8vh;}
.chevron-right {right: -8vh;}




/* Media query for screens under 800px */
@media screen and (max-width: 800px) {
    .container {
        flex-direction: column;
        height: 90%;
    }
    .chevron-left {left: -3.5vh;font-size: 3vh;}
    .chevron-right {right: -3.5vh;font-size: 3vh;}
    .left img {max-height: 60vh;}
    .bottom img {margin-left: 0;}
    .colab-description {font-size: 1.5vh;padding-left: 1vh;padding-right: 1vh;}
    .left,
    .right {flex: 1;}
}










/*OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO*/
/* PRODS */


.us-title {
  font-family: 'xtradex';
  font-size: 12vh;
  text-align: center;
  color: white;
  margin-left: auto;
  margin-right: auto;
  width: fit-content; /* To adjust the width based on content */
}



.prods {
    height: 100vh;
    overflow-x: scroll; /* Enable horizontal scrolling */
    scroll-snap-align: start;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(36vh, 1fr)); 
    grid-gap: 0.6vh; 
}

.gallery-item {
    width: 100%; /* Make each item a square */
    padding-top: 100%; /* Create a 1:1 aspect ratio for the square */
    position: relative;
    border-radius: 8px; /* Add border radius to create a rounded look */
}

.gallery-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px; /* Add border radius to create a rounded look */
    cursor: pointer;
}

.item-description {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    opacity: 0;
    transition: opacity 0.3s;
}

.main-title {
    line-height: .9;
    padding: 1.5vh .5vh 0 .5vh;
    font-weight: bold;
    font-size: 5vh;
    margin: 0;
    text-align: left;
    color: white;
}

.fa-icon {
    font-size: 2vh;
    color: white;
    position: absolute;
    top: 1vh;
    right: 3.5vh;
}

.description {
    padding: 1.5vh 1vh 0 1vh;
    font-size: 2.5vh;
    font-weight: bold;
    margin-top: 2vh;
    text-align: left;
    color: white;
}

.author {
    font-family: xtradex;
    font-size: 4vh;
    margin-top: auto; 
    margin-bottom: 2vh;
    margin-right: 3vh;
    text-align: right;
    color: white;
    align-self: flex-end; /* Align the author div to the right */
}

.gallery-item:hover img {
    opacity: 0.8; /* Reduce opacity on hover */
}

.gallery-item:hover .item-description {
    opacity: 1; /* Show the description on hover */
}






@media screen and (max-width: 800px) {
    .gallery {grid-template-columns: repeat(auto-fit, minmax(20vh, 1fr)); }
    .main-title {font-size: 2.5vh;}
    .fa-icon {font-size: 1.5vh;top: 1vh;right: 3vh;}
    .description {font-size: 1.5vh;margin-top: 1vh;}
    .author {font-size: 2vh;}
    .us-title {font-size: 6vh;}
}







/*OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO*/
/* CONTACT */


.contact {
    height: 100vh;
    text-align: center;
    scroll-snap-align: start;
}

.contact h2 {
    font-family: 'Helvetica neue';
    color: white;
    font-size: 4vh;
    text-transform: uppercase;
    padding-bottom: 5vh;
}

form-container {
    display: flex;
    justify-content: center;
    align-items: center;
    
}

.form {
    margin-top: 5vh;
    background-color: #F6F6F6;
    color: black;
    padding: 2vh 3vh 2vh 3vh;
    font-family: 'Helvetica neue';
    font-size: 2vh; 
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    border-radius: 1vh;
    box-shadow: -3px -3px 8px #3A70EB, 0px -5px 6px #D63AEB, 5px 0px 15px #3A70EB, 5px 5px 15px #F0263E;
    transition: .2s;
}

.form:hover {
    background-color: black;
    color: white;
}