:root {
  --bright: #F2EFE5; 
  --light: #ECE9DF; 
  --dlight:#C1C5BC;
  --lred: #C98184; 
  --dred: #B24D42; 
  --yellow: #F1AC28; 
  --brown: #713C30; 
  --black: #2C2C2C;
  --lgreen: #BFE9DD;
  --dgreen: #1A4D3E;
}
* {
  box-sizing:border-box;
  background-color: var(--light);
  /* scroll-behavior: smooth; */
}


.portfolio {
display: flex; 
flex-wrap: wrap;
width:100%;
overflow: hidden;
background-color: transparent;
}

.EL{
  width:100%;
  position: relative;
  display: flex;
  flex-direction: row;
  z-index: 5;
  background-color: transparent;
}

.EL .logo{
  width: 27%;
  padding: 1%;
  margin-left: 7%;
  background-color: transparent;
}

.casestudysign{
  position: relative;
  margin-top: -10%;
  width:100%;
}

@keyframes rotate {
  from {
      transform: rotate(0deg);
  }
  to {
      transform: rotate(360deg);
  }
}
.casestudies{
  position: absolute;
  width: 10%;
  margin-left: 80%;
  animation: rotate 15s linear infinite;
}

.arrow{
  margin-left: 84%;
  position: absolute;
  width: 2%; 
  margin-top: 2.5%;
  background-color: transparent;
}


.banner{
  width:100%;
  margin-top: 10%;
  
}

.cases {
  width: 100%;
  margin-top: -36%;
  display: grid;
}

.casetitle{
  margin: -2% 0 -2% 7%;
  font-size: 1.5vw;
  letter-spacing: 0.1vw;
  color: var(--dgreen);
}

.scrolling-text-container {
  overflow: hidden;
  white-space: nowrap;

}

.scrolling-text {
  display: inline-block;
  animation: scrollText 20s linear infinite; /* Adjust the duration as needed */
  position: relative;
  padding-top: 2%;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;

}


@keyframes scrollText {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}


.element-title{
margin: 3% 0 0 82%;
z-index: 3;
}


.Content{
  width: 100%;
  height: 5%;
  display: flex;
  justify-content: center;
  flex-direction: row;
  margin: 3%;
  margin-left: 25%;
  margin-right: 25%;
}


@media only screen and (max-width: 768px) and (min-width: 320px) {
    .line{
      height: 0.3vw; 
      margin-top: 7%;
    }

    .EL{
      flex-direction: column;
      justify-content: center;
      align-items: center;
      scale: 1.3; 
      margin: 25% 0 4% 0;
    }

    .EL .logo{
      margin: 9% 0% 5% 0%;
    }

    .casestudysign{
      margin-top: 36%;
    }

    .banner{
      margin-top: 21%;
    }

    .element-title{
      display: flex;
      width:100%;
      margin: 4% 0 1% 0;
      justify-content: center;

     }

     .casestudies{
      width: 12%;
      margin-left: 44%;
      
    }
    
    .arrow{
      margin-left: 48.5%;
      width: 3%;
      margin-top: 2%;
    
    }

    .cases{
      margin: 9% 0 7% 0;
    }

    .casetitle{
      display: flex;
      margin: -3% 0 0 0;
      justify-content: center; 
      font-size: 3.5vw;
    }


    casebox-element::part(casebox-container) {
      margin: 0 0 3vh 0;

  }

    landinglogo-element::part(logo-container) {
      margin: 0 10px auto;
      display: flex;
      justify-content: center;
      width: 100%;
  }
    

}