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

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

/* --- 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;
    top: 0vh;
    left: 0vw;
    width: 100vw;
    height: 100vh;
}

.aboutFirstSectionLogo{
    position: absolute;
    top: 5vh;
    left: 35vw;
    width: 30vw;
    height: 40vh;
    z-index: 1000;
}

.aboutFirstSectionLogo img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.aboutFirstSectionMain{
    position: relative;
    top: 0vh;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #111111;
    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%;
}

.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) {

  



    /* All the styles you want to apply specifically for max-width: 430px */
    .aboutFirstSectionMain{
        background-color: #111111 ; /* 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(50vh);
        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: 10vh;
        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;
    }

    .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);
      }
}