:root{
    --black:#121923;
    --white:#eaeaea;
    --primary : #F1854A;

}

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

body {
 font-family: "Exo 2", sans-serif; 
   background: var(--white);
  overflow-x: hidden;
}

.viewport {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  z-index: 10;
}


.section {
  width: 100%;
  height: 100dvh;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}


.section.second,
.section.second-and-half,
.section.third,
.section.fourth,
.section.fifth,
.section.sixth,
.section.seventh{
  position: relative; 
  height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: center;
   /* opacity: 0; */
  transform: translateY(50px);
    z-index: 10;
}

.scrolling-sections{
      position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    top: 100dvh;
    opacity: 0;
          z-index: 30;
  transition: opacity 0.5s ease-out; /* smooth fade */


}

.fourth{
  background-color:#4b4c9b ;
}