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

body {
    margin: 0;
    padding: 0;
    font-family: Clash;
    background-color: #f0f0f0;
    overflow-x: hidden; /* Prevent horizontal scroll due to random positioning */
}



.menuPage{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #111111;
  z-index: 200;
  /* pointer-events: none; */
  clip-path: polygon(0% 100% , 100% 100% , 100% 100% , 0% 100%);
  display: flex;
  flex-direction: column;
  
}

.menuMain{
  position: relative;
  top: 10vh;
  display: flex;
  width: 100vw;
  height: 80vh;
  background-color: transparent;
  font-family: Clash;
  font-weight: 350;
  

}


.menuMainLeft{
  position: relative;
  top: 5vh;
  left: 20vw;
  width: 40vw;
  height: 100%;
  display: flex;
}


.menuMainLeft img{
  width: 30vw;
  height: 70vh;
  object-fit: cover;
  filter: brightness(0.5);

}

.menuMainLeft video{
  position: relative;
  top: 20vh;
  left: -20vw;
  width: 15vw;
  height: 35vh;
  object-fit: cover;

}


.menuMainRight{
  position: relative;
  left: 20vw;
  width: 40vw;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;



}


.menuItems{
  position: relative;
  left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  padding: 0;
  gap: 15px;
  font-size: 2.5rem !important;
  
}

.menuItems li a{
  text-decoration: none;
  color: #fff;

}


.menuSocials{
  position: relative;
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  padding: 0;
  gap: 5px;
  font-size: 1.25rem;
  color: #767676;
  
}


.menuBottom{
  position: relative;
  top: 10vh;
  width: 100vw;
  height: 10vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: Clash;

}

.menuBottomLeft{
  position: relative;
  left: 10vw;
  color: #fff;
  font-size: 1.25rem;
  
}

.menuBottomRight{
  position: relative;
  right: 10vw;
  color: #fff;
  font-size: 1.25rem;
}


.navigation{
  width: 99vw;
  filter: opacity(1);
  display: flex;
  justify-content: end;
  position: fixed;
  transition: .7s;
  padding-left: 1vw;
  z-index: 210;

}

.navigation.active{
  filter: opacity(1);
}



.logo.active{
  background-color: rgb(38, 37, 37);
}


.bar{
  z-index: 2000;
  width: 60px;
  height: 60px;
  position: relative;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 15px;
  margin-top: 15px;
  background-color: #fff;
  border-radius: 50px;
  transition: 1s;
 
}


.bar .middle{
  height: 2px;
  width: 30px;
  background-color: #000;

  border-radius: 50px;
  position: absolute;
  transition: .3s ease;
}

.bar .top{
  top: 20px;
  height: 2px;
  width: 30px;
  background-color: #000;

  border-radius: 50px;
  position: absolute;
  transition: .3s ease;
}

.bar .bottom{
  bottom: 20px;
  height: 2px;
  width: 30px;
  background-color: #000;

  border-radius: 50px;
  position: absolute;
  transition: .3s ease;
}

.bar .top.active{
  transform: rotate(45deg);
  width: 30px;
  transform-origin: right;
  background-color: #000;
  top: 40px;
  left: 10px;

}

.bar .middle.active{
  transform: translateX(20px);
  opacity: 0;
}


.bar .bottom.active{
  transform: rotate(-45deg);
  width: 30px;
  transform-origin: right;
  background-color: #000;
  top: 19px;
  left: 10px;

}




.bar.active:hover{
  background-color: #000;

}


.bar:hover{
  background-color: #000;
}

.bar:hover .top{
  background-color: #fff;
}
.bar:hover .middle{
  background-color: #fff;
}
.bar:hover .bottom{
  background-color: #fff;
}

/* --- ALWAYS PLACE @font-face RULES AT THE TOP LEVEL --- */
@font-face {
    font-family: QuickSand;
    src: url('Assets/Fonts/Quicksand-Variable.ttf');
}

@font-face {
    font-family: Clash;
    src: url('Assets/Fonts/ClashDisplay-Variable.ttf');
}
/* -------------------------------------------------------- */

/* Your regular, non-media query styles */
.spacer {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2em;
    color: #555;
    text-align: center;
    background-color: #e0e0e0;
}
.spacer:last-of-type {
    background-color: #d0d0d0;
}

.aboutFirstSection {
    position: relative; /* This is crucial for positioning the video */
    top: 0vh;
    left: 0vw;
    width: 100vw;
    height: 100vh;
    overflow: hidden; /* Hide any part of the video that overflows */
}

.background-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center the video */
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1; /* Place the video behind all other content */
    object-fit: cover; /* Ensure the video covers the screen without distortion */
    filter: brightness(0.5);
}

/*.background-video video{*/
/*    filter: brightness(0.5);*/
/*}*/

.aboutFirstSectionLogo{
    position: absolute;
    top: 5vh;
    left: 0vw;
    display: flex;
    justify-content: center;
    /*align-items: center;*/
    background-color: transparent;
    width: 100vw;
    height: 30vh;
    z-index: 1000;
}

.aboutFirstSectionLogo img{
    width: 20%;
    height: 80%;
    object-fit: cover;
}
.aboutFirstSectionMain{
    position: relative;
    top: 0vh;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
}

.aboutFirstSectionMain p{
    position: relative;
    top: 7.5vh;
    width: 50vw;
    text-align: center;
    font-size: 1.3rem;
    letter-spacing: 2px;
}

.aboutFirstSectionMain p .letter{
    color: #000000;

}


  .marquee {
    position: absolute;
    top: 91vh;
    width: 100%;
    height: 5vh;
    overflow: hidden;
    padding: 1rem 0;

  }

  .wrapper {
    display: flex;
    will-change: transform;
  }

  .wrapper-inner {

    display: flex;
  }


  .wrapper-inner span {
    display: inline-block;
    margin-right: 4rem;
    font-size: 2.5rem;
    color: #fff;
    white-space: nowrap;
    flex-shrink: 0;
  }


.mainAbout{
    position: absolute;
    top: 0vh;
    left: 0vw;
    width: 100vw;
    height: 100vh;
    background-color: #222;
    transform-origin: center;
    display: flex;
    flex-direction: column;
    clip-path: inset(30vh 30vw 30vh 30vw);
    z-index: 100;
}

.mainAboutTop{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
}

.mainAboutBottom{
    position: relative;
    display: flex;
    justify-content: center;
    width: 40vw;
    height: 40vh;
    top: 10vh;
    left: 60vw;
    font-size: 2rem;
    color: #fff;
    z-index: 100;

}

.mainAboutBottom p{

    position: relative;
}


.mainAboutLeft{
    position: relative;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background-color: #222;
}

.mainAboutLeftImg{
    position: relative;
    left: 40%;
    top: 25%;
    width: 50%;
    height: 50%;
    background-color: #d0d0d0;
    clip-path: inset(0% 0% 100% 0%);
}


.mainAboutLeftImg img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.mainAboutRight{
    position: relative;
    top: 100vh;
    right: 0;
    width: 50%;
    height: 100%;
    background-color: #222;
    color: white;
}

.mainAboutRight p{
    position: relative;
    left: 10%;
    width: 50%;
}


/* --- Meet The Team Section --- */
.team-section {
    position: absolute;
    top: 100vh;
    left: 0;
    width: 100vw;
    padding: 100px 5vw;
    box-sizing: border-box;
    background-color: #222;
    opacity: 1; /* Handled by GSAP */
    z-index: 101;
    color: #fff;
}

.team-member-card {
    position: relative;
    overflow: hidden;
    background-color: #333;
    height: 30vh;
    
}

.team-member-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.team-member-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
}

.team-member-card:hover .team-member-overlay { opacity: 1; }
.team-member-card:hover img { transform: scale(1.1); }
.team-member-overlay h3 { margin: 0 0 5px 0; font-family: 'Clash', sans-serif; font-size: 1.5rem; }
.team-member-overlay p { margin: 0; font-family: 'QuickSand', sans-serif; font-size: 1rem; }

/* --- Desktop Styles (> 767px) --- */
.mobile-only { display: none; } /* Hide mobile section on desktop */
.desktop-only .team-section-title { font-size: 3rem; font-weight: 100; text-align: center; margin-bottom: 60px; }
.desktop-only .team-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(14vw, auto);
    gap: 1.5vw;
}
/* Exact placements for desktop cards */

#team-member-7 { grid-column: 5 / 9; grid-row: 1 / 2; }
#team-member-1 { grid-column: 1 / 5; grid-row: 2 / 3; }
#team-member-2 { grid-column: 5 / 9; grid-row: 2 / 3; }
#team-member-3 { grid-column: 9 / 13; grid-row: 2 / 3; }
#team-member-4 { grid-column: 1 / 5; grid-row: 3 / 4; }
#team-member-5 { grid-column: 5 / 9; grid-row: 3 / 4; }
#team-member-6 { grid-column: 9 / 13; grid-row: 3 / 4; }





.secondSectionTitle{
    position: absolute;
    top: 0vh;
    left: 0vw;
    width: 100vw;
    font-size: 0rem;
    scale: 1;
    color: #ffffff;
}


.threeBoxes{
    position: absolute;
    top: 40vh;
    left: 0vw;
    width: 100vw;
    height: 45vh;
    display: flex;
    justify-content: center;
    gap: 100px;

}

.aboutBox{
    position: relative;
    width: 15vw;
    height: 45vh;
    clip-path: inset(0% 0% 100% 0%);
}

.aboutBox img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- About Section Styling --- */
.about-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    padding: 50px 20px;
    box-sizing: border-box;
    background-color: #fff;
    position: relative;
    top: 30vh;
    z-index: 1;
}


.about-row {
    display: flex;
    justify-content: space-around;
    width: 100%;
    margin: 30px 0;
    font-size: clamp(3em, 8vw, 10em);
    font-weight: 700;
    color: #333;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    line-height: 1.1;
}


.about-word {
    opacity: 0;
    margin: 0 20px;
    will-change: opacity, transform;
}

/* Optional: Add some subtle variation to rows if desired */
.about-row:nth-child(even) {
    color: #555;
}
.about-row:nth-child(odd) {
    color: #222;
}




.footer{
    position: relative;
    top: 30vh;
    width: 100vw;
    height: 40vh;
    background-color: #111111;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow-y: hidden;
  }

  .footerDown{
    width: 100vw;
    display: flex;
    justify-content: center;
    padding: 0px;
    color: #fff;
    height: 100%;
    font-family: Clash;
    font-size: 25rem;
    position: relative;
    top: 0px;

  }

  .footerUp{
    position: relative;
    top: 75px;
    width: 100vw;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    gap: 25px;
  }


  .fUU{
    display: flex;
    gap: 20px;
  }

  .fUD{
    font-family: QuickSand;
    font-size: 0.8rem;
  }


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

  .instagram img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: invert(1);
  }

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

  .x img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

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

  .linkedIn img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: invert(1);
  }




html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: clip;
}

.lenis.lenis-smooth iframe {
    pointer-events: none;
}



/* --- YOUR MEDIA QUERY SHOULD START HERE --- */
@media (max-width: 550px) {
    
    
    
        .menuPage{
    
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-color: #111111;
      z-index: 200;
      /* pointer-events: none; */
      clip-path: polygon(0% 100% , 100% 100% , 100% 100% , 0% 100%);
      display: flex;
      flex-direction: column;
      font-size: 62.5%;
    }
    
    .menuMain{
      position: relative;
      top: 10vh;
      display: flex;
      width: 100vw;
      height: 80vh;
      background-color: transparent;
      font-family: Clash;
      font-weight: 350;
    
    }
    
    
    .menuMainLeft{
      display: none;
    }
    
    
    .menuMainLeft img{
      width: 30vw;
      height: 70vh;
      object-fit: cover;
      filter: brightness(0.5);
    
    }
    
    .menuMainLeft video{
      position: relative;
      top: 20vh;
      left: -20vw;
      width: 15vw;
      height: 35vh;
      object-fit: cover;
    
    }
    
    
    .menuMainRight{
      position: relative;
      left: 20vw;
      width: 40vw;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: start;
    
    
    
    }
    
    
    .menuItems{
      position: relative;
      left: 0;
      list-style: none;
      display: flex;
      flex-direction: column;
      padding: 0;
      gap: 15px;
      font-size: 2.5rem;
      color: #fff;
    }
    
    
    .menuSocials{
      position: relative;
      list-style: none;
      display: flex;
      flex-direction: column;
      justify-content: start;
      align-items: start;
      padding: 0;
      gap: 5px;
      font-size: 1.25rem;
      color: #767676;
      
    }
    
    
    .menuBottom{
      position: relative;
      top: 10vh;
      width: 100vw;
      height: 10vh;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-family: Clash;
    
    }
    
    .menuBottomLeft{
      position: relative;
      left: 10vw;
      color: #fff;
      font-size: 1.25rem;
      
    }
    
    .menuBottomRight{
      position: relative;
      right: 10vw;
      color: #fff;
      font-size: 1.25rem;
    }
    
    
    .navigation{
      width: 99vw;
      filter: opacity(1);
      display: flex;
      justify-content: end;
      position: fixed;
      transition: .7s;
      padding-left: 1vw;
      z-index: 210;
    
    }
    
    .navigation.active{
      filter: opacity(1);
    }
    
    
    
    .logo.active{
      background-color: rgb(38, 37, 37);
    }
    
    
    .bar{
      z-index: 2000;
      width: 60px;
      height: 60px;
      position: relative;
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 15px;
      margin-top: 15px;
      background-color: #fff;
      border-radius: 50px;
      transition: 1s;
     
    }
    
    
    .bar .middle{
      height: 2px;
      width: 30px;
      background-color: #000;
    
      border-radius: 50px;
      position: absolute;
      transition: .3s ease;
    }
    
    .bar .top{
      top: 20px;
      height: 2px;
      width: 30px;
      background-color: #000;
    
      border-radius: 50px;
      position: absolute;
      transition: .3s ease;
    }
    
    .bar .bottom{
      bottom: 20px;
      height: 2px;
      width: 30px;
      background-color: #000;
    
      border-radius: 50px;
      position: absolute;
      transition: .3s ease;
    }
    
    .bar .top.active{
      transform: rotate(45deg);
      width: 30px;
      transform-origin: right;
      background-color: #000;
      top: 40px;
      left: 10px;
    
    }
    
    .bar .middle.active{
      transform: translateX(20px);
      opacity: 0;
    }
    
    
    .bar .bottom.active{
      transform: rotate(-45deg);
      width: 30px;
      transform-origin: right;
      background-color: #000;
      top: 19px;
      left: 10px;
    
    }
    
    
    
    
    .bar.active:hover{
      background-color: #000;
    
    }
    
    
    .bar:hover{
      background-color: #000;
    }
    
    .bar:hover .top{
      background-color: #fff;
    }
    .bar:hover .middle{
      background-color: #fff;
    }
    .bar:hover .bottom{
      background-color: #fff;
    }

  



    /* All the styles you want to apply specifically for max-width: 430px */
    .aboutFirstSectionMain{
        background-color: transparent ; /* This should now work */
    }

    /* ... and all your other mobile-specific styles ... */
    .spacer {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 2em;
        color: #555;
        text-align: center;
        background-color: #e0e0e0;
    }
    .spacer:last-of-type {
        background-color: #d0d0d0;
    }

    .aboutFirstSection{
        position: relative;
        top: 0vh;
        left: 0vw;
        width: 100vw;
        height: 100vh;
    }

    .aboutFirstSectionLogo{

        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;


        top:5vh;
        left: 0vw;
        width: 100vw;
        height: 40vh;
        z-index: 100;
    }


    .aboutFirstSectionLogo img{
        width: 50%;
        height: 100%;
        object-fit: contain;
    }


    .aboutFirstSectionMain p{
        position: relative;
        top: 7.5vh;
        width: 75vw;
        text-align: center;
        font-size: 1rem;
        letter-spacing: 2px;
    }

    .aboutFirstSectionMain p .letter{
        color: #000000;

    }


      .marquee {
        position: absolute;
        top: 91vh;
        width: 100%;
        height: 5vh;
        overflow: hidden;
        padding: 1rem 0;
      }

      .wrapper {

        display: flex;
        will-change: transform;
      }

      .wrapper-inner {

        display: flex;
      }


      .wrapper-inner span {
        display: inline-block;
        margin-right: 4rem;
        font-size: 2.5rem;
        color: #fff;
        white-space: nowrap;
        flex-shrink: 0;
      }


    .mainAbout{
        position: absolute;
        top: 0vh;
        left: 0vw;
        width: 100vw;
        height: 100vh;
        background-color: #222;
        transform-origin: center;
        display: flex;
        flex-direction: column;
        clip-path: inset(50vh 50vw 50vh 50vw);
        z-index: 100;
    }

    .mainAboutTop{
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .mainAboutBottom{
        position: relative;
        display: flex;
        justify-content: center;
        width: 100vw;
        height: 40vh;
        transform: translateY(100vh);
        left: 0vw;
        font-size: 1rem;
        color: #fff;
        mix-blend-mode: difference;
        z-index: 100;
    }

    .mainAboutBottom p{
      width: 80vw;
      text-align: center;

      position: relative;
    }


    .mainAboutLeft{
        position: absolute;
        top: 10vh;
        left: 10vw;
        width: 80vw;
        height: 80vh;
        background-color: transparent;

    }



    .mainAboutLeftImg{
        position: relative;
        left: 10%;
        top: 10%;
        width: 80%;
        height: 80%;
        background-color: #d0d0d0;
        clip-path: inset(0% 0% 100% 0%);
    }


    .mainAboutLeftImg img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: brightness(1);
    }


    .mainAboutRight{
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        top: 100vh;
        left: 10vw;
        width: 80vw;
        height: 80vh;
        color: white;
        mix-blend-mode: difference;
        transform: translateY(100vh);
        background-color: transparent;
    }
    

    .mainAboutRight p{
        position: relative;
        text-align: center;
        left: 0%;
        width: 70%;
        font-size: 1rem;
    }
    
    
    .desktop-only { 
        display: none; 
    } /* Hide desktop section on mobile */
    .mobile-only { 
        display: block; 
    } /* Show mobile section */
    
    .mobile-only .team-grid {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Two equal columns */
        grid-auto-rows: 40vh;           /* Each row is 40vh tall */
        gap: 4vw;
        align-items: center; /* Vertically center content in rows */
    }

    /* --- Reset all card placements --- */
    .mobile-only .team-member-card {
        grid-column: auto !important;
        grid-row: auto !important;
        width: 100% !important; /* Ensure cards fill their grid cell */
        height: 100% !important;
    }

    /* --- Style the title for its grid position --- */
    .mobile-only .team-section-title {
        font-size: 2rem;
        font-weight: 100;
        text-align: left;
        padding: 0 10px; /* Add some spacing */
        margin: 0; /* Reset default margin */
    }
    
    .secondSectionTitle{
        position: absolute;
        top: 0vh;
        left: 0vw;
        width: 100vw;
        font-size: 0rem;
        scale: 1;
        color: #ffffff;
    }


    .threeBoxes{
        position: absolute;
        top: 5vh;
        width: 100vw;
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 30px;

    }

    .aboutBox{
        position: relative;
        width: 45vw;
        height: 25vh;
        clip-path: inset(0% 0% 100% 0%);
    }

    .aboutBox img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* --- About Section Styling --- */
    .about-section {
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: center;
        width: 100vw;
        height: 100vh;
        box-sizing: border-box;
        background-color: #fff;
        position: relative;
        top: 30vh;
        z-index: 1;
        gap:10px;  
        padding: 20px 0px ;

        
    }

    .about-row {

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 30vh;
        width: 100vw;
        letter-spacing: 0px;
        font-size: 4rem !important;
        font-weight: 700;
        color: #333;
        text-transform: uppercase;
        white-space: nowrap;
        overflow: hidden;
        line-height: 1.1;
        padding: 0;
        margin: 0;
        text-align: center;
    }

    .about-word {
      position: relative;
      left: 12.5px;
        letter-spacing: 25px;
        width: 100%;
        text-align: center;
        opacity: 0;

        will-change: opacity, transform;
    }

    /* Optional: Add some subtle variation to rows if desired */
    .about-row:nth-child(even) {
        color: #555;
    }
    .about-row:nth-child(odd) {
        color: #222;
    }

    .about-row:nth-of-type(4){
      display: none;
    }


    .footer{
        position: relative;
        top: 20vh;
        width: 100vw;
        height: 40vh;
        background-color: #111111;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        overflow-y: hidden;
      }

      .footerDown{
        width: 100vw;
        display: flex;
        justify-content: center;
        padding: 0px;
        color: #fff;
        height: 100%;
        font-family: Clash;
        font-size: 8rem;
        position: relative;
        top: 18vh

      }

      .footerUp{
        position: relative;
        top: 100px;
        width: 100vw;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        position: relative;
        gap: 25px;
      }


      .fUU{
        display: flex;
        gap: 20px;
      }

      .fUD{
        position: relative;
        top: 15px;
        font-family: QuickSand;
        font-size: 0.8rem;
      }


      .instagram{
        width: 30px;
        height: 30px;
      }

      .instagram img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: invert(1);
      }

      .x{
        width: 30px;
        height: 30px;
      }

      .x img{
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .linkedIn{
        width: 30px;
        height: 30px;
      }

      .linkedIn img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: invert(1);
      }
}