/* ========== Global Styles ========== */
* {
    box-sizing: border-box;
    cursor: none;
}

html,
body {
    margin: 0;
    padding: 0;
    background-color: #f4f3ef;
    font-family: AileronLight, sans-serif;
    overscroll-behavior: none;
    cursor: none;
}

a {
    cursor: pointer;
}

.body--no-scroll {
  overflow: hidden;
}

strong{
    font-family: "AileronSemiBold",sans-serif;
}


/* ========== Trad ========== */
.menu__services-container {
    display: flex;
    align-items: end;
    gap: 15px; 
    position: fixed;
    z-index: 11;
}

.menu__language_mobile{
    display:none;
}

/* ========== Liens des langues ========== */
.menu__language {
    font-size: 1rem;
    text-transform: uppercase;
    color: #000;
    font-family: "AileronSemiBold", sans-serif;
    display: flex;
    gap: 10px;
}

.menu__language a, .menu__language_mobile a {
    text-decoration: none;
    color: #000;
    font-family: AileronLight;
    font-weight: normal;
    transition: color 0.3s, text-decoration 0.3s;
}

.menu__language a:hover, .menu__language_mobile a:hover {
    color: #666;
}

/* Langue active (gras + souligné) */
.menu__language a.active, .menu__language_mobile a.active {
    font-family: AileronBold;
    text-decoration: underline;
}



/* ========== Typography ========== */
@font-face {
    font-family: "PalmoreLight";
    src: url("fonts/PalmoreLight.ttf")
        format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
  font-family: 'AileronUltraLight';
  src: url('fonts/AileronUltraLight.otf') format('opentype');
  font-weight:normal;
  font-style:normal;
}

@font-face {
  font-family: 'AileronLight';
  src: url('fonts/AileronLight.otf') format('opentype');
  font-weight:normal;
  font-style:normal;
}

@font-face {
  font-family: 'AileronThin';
  src: url('fonts/AileronThin.otf') format('opentype');
  font-weight:normal;
  font-style:normal;
}

@font-face {
  font-family: 'Aileron';
  src: url('fonts/Aileron.otf') format('opentype');
  font-weight:normal;
  font-style:normal;
}

@font-face {
  font-family: 'AileronSemiBold';
  src: url('fonts/AileronSemiBold.otf') format('opentype');
  font-weight:normal;
  font-style:normal;
}

@font-face {
  font-family: 'AileronBold';
  src: url('fonts/AileronBold.otf') format('opentype');
  font-weight:normal;
  font-style:normal;
}

@font-face {
  font-family: 'AileronBlack';
  src: url('fonts/AileronBlack.otf') format('opentype');
  font-weight:normal;
  font-style:normal;
}

.project__title {
    font-size: 1.4rem;
    text-align: center;
    margin: 1rem 3rem;
    font-weight: 100;
    text-transform: uppercase;
    font-family: "AileronLight";
    color: #000;
    font-style: italic;
}

.project__title a {
    color: #000;
}

.project__review {
    text-transform: uppercase;
    font-size: 3.9rem;
    text-align: left;
    max-width: 70%;
    font-weight: 100;
    margin: auto;
    margin: 8rem auto 8rem;
    font-family: "PalmoreLight", serif;
    color: #506856;
}

.project__review--centered{
    text-align: center;
}

.project__review--last{
    margin: 0 auto;
}

.project__review span{
    font-size: 1rem;
    font-style: italic;
    font-family: 'AileronLight';
}

/* ========== Intro Section ========== */
.intro {
    height: 155vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    background-color: #48534B;
}

.intro h1 {
    position: fixed;
    top: 6.5rem;
    left: 50%;
    margin: 0;
    width: 100%;
    z-index: 1;
    line-height: 0.7;
    transform: translateX(-50%);
    font-size: 16rem;
    font-weight: 100;
    text-align: center;
    font-family: "PalmoreLight";
    color: #000;
    transition: font-size 0.3s ease;
}

.intro h1 a{
    text-decoration: none;
    color:inherit;
}

.intro > img {
    height: 110vh;
    width: 38%;
    object-fit: cover;
    position: relative;
}

.intro__background {
  position: fixed;
  top: -50%;
  left: -50%;
  right: -50%;
  bottom: -50%;
  width: 200%;
  height: 200vh;
  background: transparent url('noise-transparent.png') repeat 0 0;
  background-repeat: repeat;
  animation: bg-animation .2s infinite;
  opacity: .6;
  visibility: visible;
}

@keyframes bg-animation {
    0% { transform: translate(0,0) }
    10% { transform: translate(-5%,-5%) }
    20% { transform: translate(-10%,5%) }
    30% { transform: translate(5%,-10%) }
    40% { transform: translate(-5%,15%) }
    50% { transform: translate(-10%,5%) }
    60% { transform: translate(15%,0) }
    70% { transform: translate(0,10%) }
    80% { transform: translate(-15%,0) }
    90% { transform: translate(10%,5%) }
    100% { transform: translate(5%,0) }
}

.intro__footer-text {
position: absolute;
    bottom: 2rem;
    left: 50%;
    text-transform: uppercase;
    font-size: 3rem;
    line-height: 1.2;
    width: 100%;
    max-width: 62rem;
    color: #000;
    text-align: left;
    transform: translate(-50%, 50px);
    transition: transform 0.1s ease-out;
    will-change: transform;
}

.intro__footer-text b{
    font-size:: 4rem;
    font-family: "AileronSemiBold",sans-serif;
}

/* ========== NEW SECTIONS ========== */

.section-dior {
    text-align: center;
    padding: 6vh 2rem;
}

.section-dior__title {
    font-size: 2.6rem;
    margin-bottom: .5rem;
    font-weight: 100;
}

.section-dior small {
    font-size:17px;
}


.section-dior a {
    text-decoration: underline;
    color: inherit;
    color:inherit;
    font-style: italic;
}

.section-dior__video-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 5rem;
}

.section-dior__video {
    width: 90%;
    max-width: 960px;
    aspect-ratio: 16/9;
    border-radius: 16px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
    object-fit: cover;
}

/* ========== Section title ========== */

.section-title {
    text-align: center;
    padding: 6vh 2rem;
}

.section-title {
    font-size: 2.6rem;
    margin-bottom: .5rem;
    font-weight: 100;
}

/* ========== Middle Section ========== */
.middle {
    height: 100%;
    margin: auto;
    display: flex;
    padding-top:8rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    justify-items: center;
}

.middle__text {
    left: unset;
    top: unset;
    text-transform: uppercase;
    font-size: 5rem;
    line-height: 1.2;
    margin: auto;
    width: 100%;
    max-width: 1512px;
    text-align: center;
    will-change: transform;
    color: transparent;
    -webkit-text-stroke: 0.7px #484e47;
}

.middle__icon {
    width: 7rem;
    height: 4rem;
    border-radius: 50px;
    object-fit: cover;
    margin: 0 0.5rem;
}

.middle__icon--medium {
    width: 17rem;
    height: 3.5rem;
    object-position: 0px -26px;
}


/* ========== Columns ========== */
.columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
    max-width: 80em;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.columns__item {
    --column-offset: 10vh;
    display: flex;
    flex-direction: column;
    padding: var(--column-offset) 0;
}

.columns__content {
    margin: 0 3rem 4rem; 
}

.columns__content-imgwrap img {
    border-radius: 1em;
    width: 100%;
    height: auto;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
    object-fit: cover;
    object-position: top;
}

.columns__content-caption {
    text-align: center;
    margin-top: 0.5rem;
}

/* ========== Service Drawer ========== */
.services-drawer {
    position: fixed;
    top: 0;
    right: -100%;
    height: 100%; 
    overflow: scroll;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%; 
    background: #67746b;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
    transition: right 0.3s ease; 
    z-index: 111111;
}

.services-drawer__background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; 
    z-index: 0;
}

.services-drawer__image {
    position: absolute;
    width: 11rem;
    height: 23rem;
    object-fit: cover;
    position: absolute;
    opacity: 0.2;
    will-change: transform;
    transition: transform 0.2s ease-out; 
}

.services-drawer__content,
.slider {
    position: relative;
    z-index: 1;
}

.services-drawer__close-btn {
    position: absolute;
    padding: 1rem;
    top: 1rem;
    left: 1rem;
    line-height: 0.3;
    font-size: 3.5rem;
    cursor: pointer;
    transition: color .3s ease;
    color: #00000066;
    z-index: 1;
}

.services-drawer__close-btn:hover {
    color:#000;
}

.services-drawer__content {
    margin: 0rem 0 4rem;
    font-size: 2.6rem;
    text-align: center;
}

.services-drawer--open {
    right: 0;
}


/* Slider styles */
.slider {
  position: relative;
  width: 63%;
  margin: 0 auto;
  overflow: hidden;
}

.slider__wrapper {
  display: flex;
  transition: transform 0.2s ease-in-out;
}

.slider__wrapper .slider__content{
    text-align: left;
    font-weight: 100;
    font-size: 1.5rem;
    line-height: 1.4;
}

.slider__wrapper .slider__link a{
    color:#00000066;
    text-align: center;
    border: 1px solid;
    font-size: 1.1rem;
    padding: 0.2rem 1rem;
    margin: auto;
    text-decoration: none;
    transition: color .3s ease;
    text-transform: uppercase;
}

.slider__wrapper .slider__link .fas{
    margin-left: 1rem;
}

.slider__wrapper .slider__link a:hover{
    color:#000000;
}

.slider__wrapper .slider__link {
    display: flex;
    justify-content: center;
    width: 100%;
}

.slider__title{
    font-family: 'PalmoreLight';
    font-weight: 100;
    text-transform: uppercase;
    font-size: 4rem;
    line-height: 1;
    margin-top: 0;
    letter-spacing: 1px;
    margin-bottom: 3rem;
}

slider__title i:nth-child(2){
    padding-left:5px;
}

.slider__slide {
  min-width: 100%;
  box-sizing: border-box;
  padding: 0 9rem;
  text-align: center;
}

.slider__button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-family: AileronLight, sans-serif;
    cursor: pointer;
    font-size: 5rem;
    color: #00000066;
    display: none;
    transition: color .3s ease;
}

.slider__contact{
    text-align: center;
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    color: #0000008c;
    font-family: "AileronSemiBold", sans-serif;
    transition: color .3sease;
    justify-content: center;
    gap: .7rem;
}

.slider__contact .whatsapp-icon{
    opacity: .6;
    width: 18px;
    height: 18px;
}

.slider__contact .fa-envelope{
    font-size: 21px;
    margin-left: .3rem;
}

.slider__contact a{
    color:#0000008c;
    text-decoration: none;
}

.slider__contact a:hover{
    color:#000;
    opacity: 1;
}

.slider__button--prev {
  left: 10px;
}

.slider__button--next {
  right: 10px;
}

.slider__button--visible {
  display: block;
}

.slider__button:hover {
  color: #000;
}


/* ========== Marquee (Video Slider) ========== */

.marquee {
    width: 100%;
    text-align: center;
    padding: 8rem 0 8rem;
}

.marquee--logos{
    opacity: 0.4;
}

.marquee--logos .marquee__container.desktop{
    display:flex;
}

.marquee--logos .marquee__container.mobile{
    display:none;
}

.marquee--logos h2 {
    color: white;
    font-size: 2rem;
    margin-bottom: 2rem;
    font-weight: 100;
}

.marquee__container {
    max-width: 1920px;
    margin: 2rem auto;
    overflow: hidden;
    display: flex;
    align-items: center;
    position: relative;
}

.marquee__wrapper {
    display: inline-block;
    white-space: nowrap;
    margin-right: 2rem;
    animation: marquee 36s linear infinite;
}

.marquee__wrapper--reverse {
    animation: marquee-reverse 36s linear infinite;
}

.marquee__wrapper ul {
    display: flex;
    gap: 4rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.marquee--projects .marquee__wrapper li, .marquee--logos .marquee__wrapper li{
    flex-shrink: 0;
    text-align: center;
}

.marquee__wrapper img {
    height: 3rem;
    width: auto;
    object-fit: contain;
}

.marquee--projects .marquee__wrapper {
    display: inline-block;
    white-space: nowrap;
    margin-right: 4rem;
    animation: marquee 100s linear infinite;
}

.marquee--projects img {
    display: block;
    width: 25em;
    height: auto;
    aspect-ratio: 3 / 4;
    border-radius: 1em;
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.3);
    object-fit: cover;
    object-position: top;
    cursor: pointer;
}

.marquee--projects li{
    padding: 2rem;
    justify-items: center;
}

.marquee__wrapper.paused{
    animation-play-state: paused;
}

.marquee--projects img:hover {
    animation: scroll-object-position 0s linear infinite;
}

.marquee--projects .project__title {
    font-size: 1rem;
    text-align: center;
    text-transform: uppercase;
    font-family: "AileronLight", serif;
}

@keyframes marquee {
    0% {
        transform: translate3d(0%, 0, 0);
    }
    100% {
        transform: translate3d(-100%, 0, 0);
    }
}

@keyframes marquee-reverse {
    100% {
        transform: translate3d(0%, 0, 0);
    }
    0% {
        transform: translate3d(-100%, 0, 0);
    }
}

@keyframes scroll-object-position {
    0% {
        object-position: 50% 0%;
    }
    100% {
        object-position: 50% 100%;
    }
}

/* ========== Utility Classes ========== */
.intro__parallax-image {
    transform: translateY(60px);
    transition: transform 0.1s ease-out;
    will-change: transform;
}

/* ========== Fixed UI Elements ========== */
.menu .menu__services,
.menu .menu__contact,
.menu .menu__number,
.menu .footer__info {
    position: fixed;
    text-transform: uppercase;
    z-index: 1000;
}

.menu__contact-container {
    display: flex;
    align-items: center; 
    justify-content: space-between; 
    flex-wrap: wrap; 
    gap: 20px; 
}

.menu__contact {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px; /* Espacement entre les liens */
}

.menu__contact a {
    display: flex;
    color:#000;
    text-underline-offset: 6px;
    align-items: center;
    gap: 5px;
    text-decoration:none;
}

.whatsapp-icon {
    width: 15px;
    height: 15px;
    margin-left:.3rem;
}

/* Overlay qui empêche l'interaction derrière */
.lang-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 998;
}

/* Popup de sélection de langue */
.lang-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #f4f3ef;
    color: #48534b;
    padding: 15px 15px 20px;
    font-size: 14px;
    z-index: 11111;
    display: none;
    text-align: center;
    font-family: "Space Mono", serif;
    animation: fadeIn 0.3sease-out;
}

/* Animation d’apparition */
@keyframes fadeIn {
    from { opacity: 0; transform: translateX(-50%) translateY(10px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.lang-popup-buttons {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    justify-content: center;
}

.lang-popup button {
    background: transparent;
    font-family: "Space Mono", serif;
    color: #333;
    border: none;
    cursor: pointer;
}

.lang-popup button:hover{
    text-decoration: underline;
}

.lang-popup-buttons button.active-lang {
    text-decoration: underline;
    font-weight: bold;
}


#close-popup {
    background: transparent;
    color: #333;
    border: none;
    cursor: pointer;
    font-size: 10px;
    margin-top: 10px;
    text-transform: uppercase;
    font-family: "Space Mono", serif;
}



.project-display {
    top: 3rem;
    padding: 1rem;
    left: 1rem;
    cursor: pointer;
    position: fixed;
    text-transform: uppercase;
    z-index: 1000;
    font-size:11px;
    margin:5px;
}

.project-header {
    font-family: 'AileronSemiBold', sans-serif;
    font-size: 11px;
    margin-bottom: 0.5rem;
    margin-top:1rem;
}

.loading {
    font-size: 1rem;
    color: #000;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.project-text {
    margin: 2px 0;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.project-text.visible {
    opacity: 1;
    transform: translateY(0);
}

.visible {
    opacity: 1;
}

.menu .menu__services {
    top: 1rem;
    width:185px;
    padding: 1rem 2rem 1rem 1rem;
    left: 1rem;
    cursor: pointer;
    position: relative;
    font-size: 1rem;
     -webkit-transition: font-family.2s ease;
     -moz-transition: font-family .2s ease;
     -o-transition: font-family .2s ease;
     -ms-transition: font-family .2s ease;
    transition: font-family .5s ease;
}

.menu .menu__contact {
     -webkit-transition: font-family.2s ease;
     -moz-transition: font-family .2s ease;
     -o-transition: font-family .2s ease;
     -ms-transition: font-family .2s ease;
    transition: font-family .5s ease;
}

.menu .menu__services:hover, .menu__contact a:hover{
    font-family: "AileronSemiBold",sans-serif;
}

.menu .menu__contact {
    top: 1rem;
    padding: 1rem;
    right: 1rem;
    cursor: pointer;
    font-size: 1rem;
}

.menu__number {
    top: 50%;
    right: 2rem;
    font-family: PalmoreLight;
    font-size: 5rem;
}

.menu__hamburger {
    display: none;
    cursor: pointer;
    font-size: 30px;
    transition: transform 0.3s ease;
}

.menu__drawer {
    display: flex;
    flex-direction: column;
    position: fixed;
    height: 100vh;
    overflow: hidden;
    top: 0;
    left: 0;
    right: 0;
    background-color: #48534B;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    padding: 5rem 1rem 0;
    z-index: 9999;
}

.menu__drawer.active {
    transform: translateX(0);
}

.menu__drawer div {
    padding: 10px 0;
    font-family: 'PalmoreLight';
    font-size: 2.5rem;
    text-transform: uppercase;
}


.icon--shopify {
    display: flex;
    align-items: center;
    gap: 10px;
}

.menu__drawer .icon--shopify img {
    max-width: 200px;
    margin: auto;
}

.menu__drawer .icon--shopify{
    font-family: "AileronLight";
    font-size: .9rem;
    position: relative;
    bottom: 8rem;
    right: unset;
    justify-content: center
}

.menu__drawer .icon--shopify span{
    font-family: "AileronSemiBold",sans-serif;
}

.blink-bold {
  font-family: "AileronBold";
  animation: blink 2s infinite;
}

@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

.footer__info {
    bottom: 2rem;
    left: 2rem;
    font-size: 0.9rem;
    color: #000;
    z-index: 10000;
}

footer{
    position: fixed;
    bottom: 2rem;
    left:2rem;
    width: 100%;
    text-align: left;
}

.icon--shopify {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 10000;
    transition: transform 0.2s ease-in-out;
}

.icon--shopify a {
    text-decoration: none;
    display: flex;
    color: #000;
    flex-direction: column;
    text-align: center;
    row-gap: 5px;
}

.icon--shopify img {
    width: auto;
    height: 2rem;
}

.icon--shopify:hover {
    transform: scale(1.1);
}

.stats__icon--inline {
width: 8rem;
    height: 4rem;
    border-radius: 50px;
    object-fit: cover;
    margin: 0 0.3rem;
}

.stats__icon--inline.medium{
    width: 13rem;
}

/* ========== Custom Cursor ========== */
.cursor--custom {
    position: fixed;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    pointer-events: none;
    will-change: transform;
    z-index: 111111111;
    transform: translate3d(-100px, -100px, 0);
    opacity: 0;
    mix-blend-mode: difference;
    transition: opacity 0.4s ease, transform 0.15s cubic-bezier(0, 0.89, 0.49, 0.92);
}

.services-drawer:hover{
    cursor: auto;
}

.cursor--custom .cursor {
    width: 20px;
    height: 20px;
    z-index: 1000;
    border-radius: 100%;
    pointer-events: none;
    background: #fff;
    transform: scale(1);
    transition: transform 0.3s ease;
}

.cursor--custom-active .cursor {
    transform: scale(2.5); 
    transition: transform 0.2s ease; 
    pointer-events: none;
}

body:hover .cursor--custom {
    opacity: 1;
    pointer-events: none;
}

.plein__dautres{
    width:100%;
    margin:auto;
    font-size:12px; 
    text-transform: uppercase;
    text-align:center;
    letter-spacing: 0;
    max-width: 50rem;
}

/* ===========  MAINTENANCE PAGE =============  */

.intro-maintenance h1 {
    position: fixed;
    top: 2rem;
    left: 2rem;
    margin: 0;
    width: auto;
    z-index: 1;
    line-height: 0.7;
    font-size: 3rem;
    font-weight: 100;
    font-family: "PalmoreLight";
    color: #000;
    transition: font-size 0.3s ease;
}

.intro-maintenance h1 a{
    text-decoration: none;
    color:inherit;
}


/* ========== Responsive Styles ========== */
@media screen and (max-width: 1200px) {
    .cursor--custom {
        display: none !important;
    }
}

/* ========== Responsive Styles ========== */
@media screen and (max-width: 1200px) {
    .intro h1 {
        font-size: 8rem;
    }

    .intro__footer-text {
        font-size: 2rem;
        padding: 2rem;
    }

    .intro > img {
        width: 50%;
    }

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

    .columns__content {
        margin: 0 2rem 2rem;
    }

    .services-drawer__image {
        width: 3rem;
        height: 5rem;
    }

    .services-drawer__image video:nth-child(1){
        top:8%!important;
        left:90%!important;
    }

    .services-drawer__image video:nth-child(2){
        display: none;
    }

    .menu__services,
    .menu__contact,
    .menu__number {
        font-size: 0.8rem;
    }

    .menu__drawer .menu__contact .fas{
        font-size:1.5rem;
    }

    .footer__info {
        font-size: 0.8rem;
    }

    .slider__title {
        font-size: 2.5rem;
    }

    .slider__slide {
        padding: 0 4rem;
    }

    .middle__text {
        font-size: 3rem;
    }
}

@media screen and (max-width: 768px) {
    .lang-popup{
        width:94%;
    }

    .menu__language_mobile {
        position: fixed;
        z-index: 11111;
        top: 20px;
        right: 14px;
        display: flex;
    }

    .lang-button {
        font-size: 1rem;
        text-transform: uppercase;
        background: none;
        border: none;
        color: #000;
        font-family: "AileronSemiBold", sans-serif;
        cursor: pointer;
    }

    .lang-links {
        display: none;
        position: absolute;
        top: 100%;
        right: 0;
        background-color: #fff;
        border: 1px solid #ccc;
        z-index: 1000;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    }

    .lang-links a {
        display: block;
        padding: 8px 12px;
        font-family: AileronLight;
        color: #000;
        text-decoration: none;
    }

    .lang-links a:hover {
        background-color: #f1f1f1;
        color: #666;
    }

    .menu__contact a{
        font-size: 15px;
        font-family: 'AileronSemiBold';
        width:50%;
    }

    .menu__contact .fa-envelope{
        font-size:16px!important;
    }

    .intro__background {
        position: unset;
        top: unset;
        left: unset;
        right: unset;
        bottom: unset;
        width: unset;
        height: unset;
        background: none;
        background-repeat: unset;
        animation: unset;
        opacity: unset;
        visibility: unset;
    }

    .project-display{
        position: absolute;
    }

    .menu {
        display: none;
    }

    .services-drawer__background video:nth-child(5), .services-drawer__background video:nth-child(4){
        display: none;
    }

    .slider__button{
        font-size: 3rem;
        top:calc(100% - 3rem);
    }

    .slider__contact{
        font-size: 1.2rem;
        color:#000;
        flex-direction: column;
    }

    .intro > img{
        height:85vh;
    }

    .services-drawer__close-btn{
        right: 1rem;
        left: unset;
        font-size: 2rem;
    }

    .menu__hamburger {
        display: block; 
        position: absolute;
        z-index: 111111;
        left: 0px;
        position: sticky;
        top: 0px;
        height:0;
    }

    .menu__hamburger.open i {
        transform: rotate(90deg);
        transition: transform 0.3s ease;
    }

    .menu__hamburger i {
        transition: transform 0.3s ease; 
        padding: 1rem;
    }

    .menu__hamburger.open i:before {
        transform: rotate(-90deg);
        transition: transform 0.3s ease;
    }

    .menu__drawer.active {
        z-index: 11111;
        display: flex;
    }

    .menu__drawer {
        justify-content: space-between;
        transform: translateX(0);
        transform: translateX(-100%);
    }

    .menu__number {
        display: none;
    }

    .marquee--logos .marquee__wrapper li {
        width:10rem;
    }

    .marquee--logos .marquee__wrapper img{
        height:4rem;
    }

    .columns__item{
        padding-top:4rem;
    }

    .marquee--logos .marquee__wrapper{
        animation: marquee 15s linear infinite;
    }

    .marquee--projects .marquee__wrapper{
        animation: marquee 65s linear infinite;
    }

    .marquee--logos .marquee__wrapper--reverse {
        animation: marquee-reverse 25s linear infinite;
    }

    .marquee--projects img:hover {
        animation: none;
    }

    .marquee--projects .marquee__title{
        font-size: 1.2rem;
    }

    .marquee{
        padding: 0 0 8rem;
    }

    .marquee--logos h2{
        font-size:1.2rem;
    }

    .columns__item {
        transition: none !important;
        transform: none !important;
    }

    .intro h1 {
        font-size: 3rem;
        z-index: 1;
        position: fixed;
        top: 1rem;
    }

    .columns__content-imgwrap{
        text-align: center;
    }

    .project__review{
        font-size: 2rem;
        max-width:100%;
        margin:2rem 1rem;
        text-align: center;
    }

    .project__title{
        font-size: 1rem!important;
    }

    .intro__footer-text {
        font-size: 1.6rem;
        padding: 2rem;
    }

    .intro > img {
        width: 90%;
    }

    .marquee--logos{
        transform:translate(0%, 160px);
    }

    .marquee--logos img{
        width:100%;
    }

    .marquee--logos .marquee__container.desktop{
        display:none;
    }
    
    .marquee--logos .marquee__container.mobile{
        display:flex;
    }

    .menu__services,
    .menu__contact {
        font-size: 1rem;
    }

    .columns {
        display: flex;
        flex-direction: column-reverse;
    }

    .columns__item {
        padding: 0rem 0;
    }

    .columns__content {
        margin: 0 1.5rem 2rem;
    }

    .services-drawer__content {
        font-size: 1rem;
        margin: 4rem 0 2rem;
    }

    .services-drawer__image{
        top: 1rem!important;
        left: 50%!important;
        transform: translateX(-50%);
    }

    .slider{
        width:100%;
        height: auto;
        padding: 0rem 0 5rem;
    }

    .slider__title {
        font-size: 3rem;
        margin-bottom:1rem;
    }

    .slider__slide {
        padding: 0 2rem;
    }

    .footer__info {
        font-size: 0.7rem;
    }

    .middle{
        height:100%;
        padding: 3rem 1rem 4rem;
    }

    .middle__text {
        font-size: 1.7rem;
        position: relative;
        left: 0;
        line-height: 1.5;
        transform: none;
    }

    .middle__icon{
        vertical-align: middle;
        height:1.7rem;
    }

    .middle__icon--medium{
        height:1.7rem;
    }

    .middle__text span{
        vertical-align: middle;
    }

    .slider__wrapper .slider__content{
        font-size: 1rem;
    }

    footer{
        position: fixed;
        bottom: 1rem;
        left:unset;
        text-align: center;
        width: 100%;
    }

    .columns__content-imgwrap img{
        width: 90%;
    }
}

@media screen and (max-width: 480px) {
    .intro__footer-text {
        font-size: 1.4rem;
        padding: 2rem;
    }

    .intro > img {
        width: 90%;
    }

    .columns__content {
        margin: 0 1rem 1.5rem;
    }

    .menu__services,
    .menu__contact {
        font-size: 0.8rem;
    }

    .footer__info {
        font-size: 0.6rem;
    }

    .slider__title {
        font-size: 1.8rem;
    }

    .slider__slide {
        padding: 0 2rem;
    }
}