html{
    font-size: 62.5%;
    box-sizing: border-box;
}

body{
    width: 100vw;
    overflow-x: hidden;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

@font-face {
    font-family: Inter;
    src: url(Assets/Fonts/Inter/Inter-VariableFont_opsz,wght.ttf);
}


.firstSection{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10;
}

.firstSectionBg{
    position: relative;
    width: 100vw;
    height: 100vh;
    z-index: 1;
}

.firstSectionBg video{
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.5);
}

.firstSectionTitle{
    position: absolute;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: .4rem;
    top: 40vh;
    left: 15vw;
    width: 60vw;
    font-size: 10rem;
    font-family: Inter;
    z-index: 10;
}


.firstSectionSubtitle{
    position: absolute;
    color: #ffffff;
    top: 72.5vh;
    left: 15vw;
    width: 40vw;
    font-size: 2rem;
    font-family: Inter;
    z-index: 10;
}

/* ============================= */
/* === SECOND SECTION STYLES === */
/* ============================= */

/* Container & pinning */

.secondSection {
  position: relative;
  top: 100vh;
  width: 100vw;
  height: 150vh;
  overflow: hidden;
  z-index: 10;
  background-color: #000;
  font-family: Inter;
}

.secondSectionHeader{
  width: 100vw;
  height: 15vh;
  background-color: #fff;
  font-size: 5rem;
  display: flex;
  justify-content:start;
  align-items: center;
  padding-left: 2vw;
}

.secondSectionMain{
  width: 100vw;
  height: 290vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0vh;



}

.secondSectionService{
  position: relative;
  width: 100vw;
  height: 60vh;
  background-color: #fff;
  display: flex;
  border-top: 1.5px solid black;
}



.secondSectionService:nth-of-type(1){
  z-index: 1;
  background-color: #fff;
}


.secondSectionService:nth-of-type(2){
  z-index: 2;
  background-color: #fff;
}


.secondSectionService:nth-of-type(3){
  z-index: 3;
  background-color: #fff;
}

.secondSectionService:nth-of-type(4){
  z-index: 4;
  background-color: #fff;
}




.serviceLeft{
  width: 50vw;
  display: flex;
  flex-direction: column;
}

.leftTitle{
  position: relative;
  top: 30px;
  left: 30px;
  height: 5vh;
  font-size: 4rem;
}

.serviceLeft p {
  position: relative;
  top: 30px;
  left: 30px;
  width: 30vw;
  font-size: 2rem;
  overflow: hidden;
}

.serviceLeft p:nth-of-type(2) {
  position: relative;
  top: 30px;
  left: 30px;
  width: 30vw;
  font-size: 1.5rem;
  overflow: hidden;
}


.serviceRight{
  width: 50vw;
  display: flex;
  justify-content: center;
  align-items: center;


}

.serviceRight img{
  width: 90%;
  height: 90%;
  object-fit: cover;
  border-radius: 2rem;
  transform-origin: top center;
}


.thirdSection {
    position: relative;
    width: 100vw;
    height: 100vh;
    top: 160vh;
    left: 0;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    z-index: 10;
  }
  
  .thirdSectionBg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    clip-path: inset(12.5vh 40vw 12.5vh 40vw round 2rem); /* 👈 key addition */
    will-change: clip-path;
    overflow: hidden;
    z-index: 1;
    border-radius: 2rem; /* 👈 backup for any non-clip areas */
  }
  
  .thirdSectionBg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .thirdSectionTitle {
    position: relative;
    display: flex;
    justify-content: center;
    text-align: center;
    width: 70vw;
    font-size: 10rem;
    font-family: Inter;
    color: white;
    mix-blend-mode: exclusion;
    z-index: 2;
    pointer-events: none;
  }


  .fourthSection{
    position: relative;
    left: 0;
    top: 160vh;
    width: 100vw;
    height: 150vh;
    z-index: 100;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  }

  .fourthSectionHeading{
    background-color: #fafafa;
    position: relative;
    top: 0;
    left: 0;
    width: 100vw;
    height: 50vh;
    display: flex;
    justify-content: center;
    gap: 100px;
  }


  .fourthSectionHeadingLeft{
    position: relative;
    left: 0;
    top: 10%;
    width: 30vw;
    height: 80%;
    font-size: 4rem;
    font-family: Inter;
    display: flex;
    align-items: center;
  }

  .fourthSectionHeadingRight{
    position: relative;
    right: 0;
    top: 10%;
    width: 30vw;
    height: 80%;
    font-size: 1.5rem;
    font-family: Inter;
    display: flex;
    align-items: center;
  }

  .fourthSectionMain{
    position: relative;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
   
    font-family: Inter;
  }

  .fourthSectionMainTop{
    position: relative;
    overflow: hidden; /* hide anything outside */ 
    top: 0vh;
    left: 0;
    width: 100vw;
    height: 50vh;
    background-color: #302f2f;
    display: flex;

    justify-content: space-between;
  }

  .TopCover{
    position: absolute;
    inset: 0;
    background: #ffffff;
    z-index: 2;
    /* ← FULLY covering */
    clip-path: inset(0 0 0 0);
  }


  .TopText{
    position: relative;
    left: 15vw;
    width: 40vw;
    display: flex;
    justify-content: center;
    flex-direction: column;
    z-index: 10;
    mix-blend-mode: difference;
    color: white;
  }

  .TopText h1{
    font-size: 3rem;
  }

  .TopText p{
    font-size: 1.3rem;
    width: 30vw;
  }

  .MainTopImg{
    position: relative;
    width: 30vw;
    height: 50vh;
    overflow: hidden;       /* hide the overflow of the shifting img */
  }

  .MainTopImg img{
    position: absolute;
    top: 0;
    left: 0;
    width: 120%;            /* 20% wider than its frame */
    height: 100%;
    object-fit: cover;
  }
  



.fourthSectionMainBottom{
  position: relative;
  overflow: hidden; /* hide anything outside */ 
  top: 0vh;
  left: 0;
  width: 100vw;
  height: 50vh;
  background-color: #302f2f;
  display: flex;
  justify-content: space-between;
}



.BottomCover {
  position: absolute;
  inset: 0;
  background: #ffffff;
  z-index: 2;
  /* ← FULLY covering */
  clip-path: inset(0 0 0 0);
}


.BottomText{
  position: relative;
  left: 15vw;
  width: 40vw;
  display: flex;
  justify-content: center;
  flex-direction: column;
  z-index: 10;
  mix-blend-mode: difference;
  color: white;
}

.BottomText h1{
  font-size: 3rem;
}

.BottomText p{
  font-size: 1.3rem;
  width: 30vw;
}

.MainBottomImg{
  position: relative;
  width: 30vw;
  height: 50vh;
  overflow: hidden;       /* hide the overflow of the shifting img */
}

.MainBottomImg img{
  position: absolute;
  top: 0;
  left: 0;
  width: 120%;            /* 20% wider than its frame */
  height: 100%;
  object-fit: cover;
}


.fifthSection{
  position: relative;
  top: 160vh;
  width: 100vw;
  height: 100vh;
  z-index: 20;
}


.fifthSectionBg{
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10;
}

.fifthSectionBg img{
  width: 100%;
  height: 120%;
  object-fit: cover;
  filter: brightness(0.7);
}


.fifthSectionBox{
  position: relative;
  top: 50vh;
  left: 5vw;
  width: 35vw;
  height: 40vh;
  background-color: #302f2f;
  z-index: 10;
  border-radius: 25px;
  font-family: Inter;
}

.boxButton{
  position: relative;
  top: 70px;
  left: 325px;
  width: 150px;
  height: 50px;
  background-color: #ffffff;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.4rem;

}


.fifthSectionBox h1{
  position: relative;
  top: 2vw;
  left: 2.5vw;
  font-size: 3rem;
  font-weight: 400;
  color: #fafafa;
  letter-spacing: 2px;
}


.fifthSection p{
  position: relative;
  left: 2.5vw;
  top: 2vw;
  width: 400px;
  font-size: 1.5rem;
  color: #fafafa;

}


.sixthSection{
  position: relative;
  top: 160vh;
  width: 100vw;
  height: 100vh;
  background-color: #fafafa;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5);  
  display: flex;
  justify-content: center;
  flex-direction: column;
  font-family: Inter;
  z-index: 20;
}


.leftText{
  position: relative;
  top: -10vh;
  left: 10vw;
  font-size: 2.5rem;
  width: 70vw;
  color: #302f2f;
  line-height: 1.6;
  text-align: left;
  display: block;
  overflow-wrap: break-word;
}


.leftText .letter{
  opacity: 0;
}


.rightText{
  position: relative;
  top: 0vh;
  left: 0vw;
  width: 100vw;

}

.rightTextCover{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  clip-path: inset(0 100% 0 0);;
}

.rightText p{
  position: relative;
  left: 60vw;
  width: 30vw;
  font-size: 1.5rem;
  color: #ffffff;
  mix-blend-mode: difference;
  font-weight: 300;

}


.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 55vh;
  background-color: #302f2f;
  color: #fafafa;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 4rem;
  will-change: transform;
  z-index: 10;
  opacity: 0;

}

.footerBg{
  width: 100%;
  height: 100%;
}

.footerBg video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.8);
}

.footerTitle{
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 25vh;
  font-family: Inter;
  
}


.footerTitle h1{
  font-size: 7.5rem;
  color: #ffffff;
  letter-spacing: 20px;

}

.footerTitle h2{
  font-size: 2rem;
  color: #ffffff;
  
}



/* responsive */
@media (max-width: 768px) {

  html, body {
    background: black; /* fallback for any tiny gap */
    height: 100%;
    margin: 0;
    padding: 0;
    /* ensure the safe‐area insets are honored */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }

  @font-face {
    font-family: Inter;
    src: url(Assets/Fonts/Inter/Inter-VariableFont_opsz,wght.ttf);
  }

  .firstSection {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10;
  }

  .firstSectionBg {
    position: relative;
    top: -10vh;
    width: 100vw;
    height: 110vh;
    z-index: 1;
  }

  .firstSectionBg video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 110vh;
    object-fit: cover;
  }

  /* changed */
  .firstSectionTitle {
    position: absolute;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.2rem;
    top: 30vh;
    left: 5vw;
    width: 90vw;
    font-size: 6rem;
    font-family: Inter;
    z-index: 10;
    text-align: center;        /* ← center text */
  }
  
  /* changed */
  .firstSectionSubtitle {
    position: absolute;
    color: #ffffff;
    top: 65vh;
    left: 5vw;
    width: 90vw;
    font-size: 1.6rem;
    font-family: Inter;
    z-index: 10;
    text-align: center;        /* ← center text */
  }

  /* ============================= */
  /* === SECOND SECTION STYLES === */
  /* ============================= */


  .secondSection {
    position: relative;
    top: 100vh;
    width: 100vw;
    height: 150vh;
    overflow: hidden;
    z-index: 10;
    background-color: #000;
    font-family: Inter;
  }
  

  .secondSectionHeader{
    width: 100vw;
    height: 10vh;
    background-color: #fff;
    font-size: 3rem;
    display: flex;
    justify-content:center;
    align-items: center;
    padding-left: 0vw;
  }
  

  .secondSectionMain{
    width: 100vw;
    height: 290vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0vh;
  
  
  
  }
  
  .secondSectionService{
    position: relative;
    width: 100vw;
    height: 60vh;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    border-top: 1.5px solid black;
  }
  
  
  
  .secondSectionService:nth-of-type(1){
    z-index: 1;
    background-color: #fff;
  }
  
  
  .secondSectionService:nth-of-type(2){
    z-index: 2;
    background-color: #fff;
  }
  
  
  .secondSectionService:nth-of-type(3){
    z-index: 3;
    background-color: #fff;
  }
  
  .secondSectionService:nth-of-type(4){
    z-index: 4;
    background-color: #fff;
  }
  
  
  .serviceLeft{
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  .leftTitle{
    position: relative;
    top: 30px;
    left: 0px;
    height: 5vh;
    font-size: 3rem;
    display: flex;
    justify-content: center;

  }
  
  .serviceLeft p {
    position: relative;
    top: 30px;
    left: 0px;
    width: 80vw;
    font-size: 2rem;
    overflow: hidden;
    text-align: center;
  }
  

  .serviceLeft p:nth-of-type(2) {
    position: relative;
    top: 30px;
    left: 0px;
    width: 80vw;
    font-size: 1.5rem;
    overflow: hidden;
    text-align: center;
  }
  
  
  .serviceRight{
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
  
  
  }
  
  .serviceRight img{
    position: relative;
    top: 25px;
    width: 90%;
    height: 90%;
    object-fit: cover;
    border-radius: 2rem;
    transform-origin: top center;
  }
  
  

  .thirdSection {
    position: relative;
    width: 100vw;
    height: 100vh;
    top: 180vh;
    left: 0;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    z-index: 10;
  }

  /* changed */
  .thirdSectionBg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    clip-path: inset(10vh 10vw 10vh 10vw round 1rem);
    will-change: clip-path;
    overflow: hidden;
    z-index: 1;
    border-radius: 1rem;
  }

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

  /* changed */
  .thirdSectionTitle {
    position: relative;
    display: flex;
    justify-content: center;
    text-align: center;
    width: 90vw;
    font-size: 6rem;
    font-family: Inter;
    color: white;
    mix-blend-mode: exclusion;
    z-index: 2;
    pointer-events: none;
  }


  .fourthSection{
    position: relative;
    top: 180vh;
    background-color: #fafafa;
    box-shadow: 0 30px 30px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    width: 100vw;
    overflow-x: hidden;
    
  }


  .fourthSectionHeading {
    background-color: #fafafa;
    position: relative;
    top: 0;
    left: 0;
    width: 100vw;
    height: 25vh;               /* keeps same height as before */
    display: flex;
    flex-direction: column;
    justify-content: center;    /* vertical centering */
    align-items: center;        /* horizontal centering */
    gap: 0rem;
    /* padding: 2rem 1rem; */
  }
  
  /* NEW: remove positioning on children, let flex handle layout */
  .fourthSectionHeadingLeft,
  .fourthSectionHeadingRight {
    width: 80%;                 /* or any max‑width you prefer */
    /* margin: 0 auto; */
    text-align: center;         /* center the text inside */
    font-family: Inter, sans-serif;
  }
  
  /* keep your font sizes */
  .fourthSectionHeadingLeft {
    font-size: 2rem;
  }
  
  .fourthSectionHeadingRight {
    font-size: 1.2rem;
  }
  .fourthSectionMain {
    position: relative;
    top: 10vh;
    left: 0;
    width: 100vw;
    height: 130vh;
    display: flex;
    flex-direction: column;
    font-family: Inter;
  }

  /* changed */
  .fourthSectionMainTop {
    position: relative;
    overflow: hidden;
    top: 0vh;
    left: 0;
    width: 100vw;
    height: 50vh;
    background-color: #302f2f;
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;
    align-items: center;
    padding: 2rem 1rem;
  }

  .TopCover {
    position: absolute;
    inset: 0;
    background: #ffffff;
    z-index: 2;
    clip-path: inset(0 0 0 0);
  }

  /* changed */
  .TopText {
    position: relative;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    z-index: 10;
    mix-blend-mode: normal;
    color: white;
  }

  .TopText h1 {
    font-size: 3rem;
  }

  .TopText p {
    font-size: 1.3rem;
    width: 100%;
  }

  /* changed */
  .MainTopImg {
    position: relative;
    width: 100%;
    height: 30vh;
    overflow: hidden;
    margin-bottom: 1rem;
  }

  .MainTopImg img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center; 
  }

  /* changed */
  .fourthSectionMainBottom {
    position: relative;
    overflow: hidden;
    top: 0vh;
    left: 0;
    width: 100vw;
    height: 50vh;
    background-color: #302f2f;
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;
    align-items: center;
    padding: 2rem 1rem;
  }

  .BottomCover {
    position: absolute;
    inset: 0;
    background: #ffffff;
    z-index: 2;
    clip-path: inset(0 0 0 0);
  }

  /* changed */
  .BottomText {
    position: relative;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    z-index: 10;
    mix-blend-mode: normal;
    color: white;
  }

  .BottomText h1 {
    font-size: 3rem;
  }

  .BottomText p {
    font-size: 1.3rem;
    width: 100%;
  }

  /* changed */
  .MainBottomImg {
    position: relative;
    width: 100%;
    height: 30vh;
    overflow: hidden;
    margin-bottom: 1rem;
  }

  .MainBottomImg img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center; 
  }

  .fifthSection {
    position: relative;
    top: 180vh;
    width: 100vw;
    height: 100vh;
    z-index: 20;
  }

  .fifthSectionBg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10;
  }

  .fifthSectionBg img {
    width: 100%;
    height: 120%;
    object-fit: cover;
    filter: brightness(0.7);
  }

  /* changed */
  .fifthSectionBox {
    position: relative;
    top: 30vh;
    left: 5vw;
    width: 90vw;
    height: 30vh;
    background-color: #302f2f;
    z-index: 10;
    border-radius: 25px;
    font-family: Inter;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);;

  }

  /* changed */
  .boxButton {
    position: relative;
    top: 5vh;
    left: 52.5vw;
    width: 120px;
    height: 35px;
    background-color: #ffffff;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.4rem;
    margin-top: 1rem;
    
  }

  .fifthSectionBox h1 {
    position: relative;
    top: 4vw;
    left: 4vw;
    font-size: 2.2rem;
    font-weight: 400;
    color: #fafafa;
    letter-spacing: 2px;
  }

  /* changed */
  .fifthSection p {
    position: relative;
    left: 4vw;
    top: 4vw;
    width: 90%;
    font-size: 1.2rem;
    color: #fafafa;
  }

  .sixthSection {
    position: relative;
    top: 180vh;
    width: 100vw;
    height: 100vh;
    background-color: #fafafa;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    flex-direction: column;
    font-family: Inter;
    z-index: 20;
    /* padding: 2rem 1rem; */
  }

  /* changed */
  .leftText {
    position: relative;
    top: -15vh;
    left: 5vw;
    font-size: 1.3rem;
    width: 90vw;
    color: #302f2f;
    line-height: 1.6;
    text-align: center;
    display: block;
    overflow-wrap: break-word;

  }

  .leftText .letter {
    opacity: 0;
  }

  .rightText {
    position: relative;
    top: 0;
    left: 0;
    width: 100vw;
  }

  .rightTextCover {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    clip-path: inset(0 100% 0 0);
  }

  /* changed */
  .rightText p {
    position: relative;
    left: 5vw;

    width: 90vw;
    font-size: 1.5rem;
    color: #ffffff;
    mix-blend-mode: difference;
    font-weight: 300;
    text-align: center;
  }

  .footer {
    position: fixed;
    /* top: 900vh; */
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 55vh;
    background-color: #302f2f;
    color: #fafafa;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 4rem;
    will-change: transform;
    z-index: 10;
    opacity: 0;
  }

  .footerBg {
    width: 100%;
    height: 100%;
  }

  .footerBg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.8);
  }

  .footerTitle {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 25vh;
    font-family: Inter;
  }

  /* changed */
  .footerTitle h1 {
    font-size: 4rem;
    color: #ffffff;
    letter-spacing: 10px;
  }

  /* changed */
  .footerTitle h2 {
    font-size: 1.6rem;
    color: #ffffff;
  }

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

}





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