.participants-section{
  width: 100%;
  height: max-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background-color: #060606;
}

.participants-wrapper{
  width: 100%;
  height: 50vw;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 6vw 2vw;
  box-sizing: border-box;
  justify-content: space-between;
  background-color: #060606;
}

.participants-banner-image{
  width: 100%;
  height: 40vw;
  background-image: url("/images/routeSection/DSC06775.webp");
  background-position: 50% 0%;
  background-size: cover;
  position: relative;
}

.participants-banner-image::after{
  content: "";
  position: absolute;
  top: -1vw;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("/images/routeSection/FILO.png");
  background-position: 0% 0%;
  background-size: 100%;
  background-repeat: no-repeat;
  z-index: 2;
}

.participants-banner-image::before{
  content: "";
  position: absolute;
  bottom: -1vw;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("/images/routeSection/FILO.png");
  background-position: 0% 0%;
  background-size: 100%;
  background-repeat: no-repeat;
  z-index: 2;
  transform: scaleX(-1) scaleY(-1);
}

.participants-info-container{
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 2vw;
  padding-left: 6vw;
  box-sizing: border-box;
}

.participants-info-title {
  color: var(--tertiaryHeadingColor);
  font-family: var(--headingFont);
  font-weight: 600;
  font-size: var(--superheadingFontSize);
  text-shadow: 0 0 1vw 0 #00000080;
  margin: 0;
  margin-bottom: 1vw;
}

.participants-info-paragraph {
  text-align: justify;
  width: 95%;
  color: rgba(var(--primaryColorRgb), 0.7);
  font-family: var(--headingFont);
  font-weight: 500;
  font-size: var(--subheadingFontSize);
  text-shadow: 0 0 1vw 0 #00000080;
  margin: 0;
}

.participants-info-subtitle {
  color: rgba(var(--primaryColorRgb), 0.8);
  font-family: var(--headingFont);
  font-weight: 600;
  font-size: var(--paragraphFontSize);
  text-shadow: 0 0 1vw 0 #00000080;
  margin: 0;
  margin-bottom: 1vw;
}

.participants-event-duration{
  color: rgba(var(--primaryColorRgb), 0.5);
  font-family: var(--headingFont);
  font-weight: 600;
  font-size: var(--paragraphFontSize);
  text-shadow: 0 0 1vw 0 #00000080;
  margin: 0;
  margin-bottom: 3vw;
}

.participants-graphic-container{
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2vw;
  box-sizing: border-box;
  position: relative;
}

.participants-graphic-title{
  margin: 0;
  color: var(--primaryColor);
  font-family: var(--headingFont);
}

.participants-graphic-title:nth-of-type(1){
  font-size: 6vw;
  line-height: 4.6vw;
  align-self: flex-start;
}

.participants-graphic-title:nth-of-type(1)::after{
  content: "";
  position: absolute;
  top: 5vw;
  right: 2.5vw;
  width: 68%;
  height: 4vw;
  /* transform: translate(-50%, 0); */
  background-color: var(--primaryColor);
}

.participants-graphic-title:nth-of-type(2){
  font-size: 4.76vw;
  line-height: 3.2vw;
  align-self: flex-end;
  position: relative;
}

.participants-graphic-title:nth-of-type(2)::after{
  content: "CION";
  position: absolute;
  top: 0;
  right: 0;
  font-size: 4.76vw;
  line-height: 3.2vw;
  color: #060606;
}

.participants-graphic-title:nth-of-type(2)::before{
  content: "";
  position: absolute;
  top: 0;
  right: 0.4vw;
  width: 11.3vw;
  height: 18.5vw;
  background-color: var(--primaryColor);
}

.participants-graphic-title:nth-of-type(3){
  margin-top: 3vw;
  font-size: 1.65vw;
  line-height: 1.2vw;
  margin-right: 1vw;
}

.participants-graphic-title:nth-of-type(4){
  font-size: 5.6vw;
  line-height: 4.6vw;
  align-self: flex-start;
  position: relative;
}

.participants-graphic-title:nth-of-type(4)::before{
  content: "";
  position: absolute;
  top: 0.2vw;
  left: 0.2vw;
  width: 10.5vw;
  height: 10.5vw;
  background-color: var(--primaryColor);
}

.participants-graphic-title:nth-of-type(4)::after{
  content: "SEG";
  position: absolute;
  top: 0;
  left: 0;
  font-size: 5.6vw;
  line-height: 4.6vw;
  color: #060606;
}

@media(max-width: 700px){
  .participants-wrapper{
    height: 240vw;
    flex-direction: column;
  }

  .participants-graphic-container{
    width: 100%;
    height: 40%;
  }

  .participants-info-container{
    width: 100%;
    height: 60%;
  }

  .participants-graphic-title:nth-of-type(1){
    font-size: 13vw;
    line-height: 10.6vw;
    position: relative;
  }
  
  .participants-graphic-title:nth-of-type(1)::after{
    top: -8vw;
    right: 2.5vw;
    width: 95%;
    height: 6vw;
  }
  
  .participants-graphic-title:nth-of-type(2){
    font-size: 10vw;
    line-height: 8.2vw;
  }
  
  .participants-graphic-title:nth-of-type(2)::after{
    top: 0;
    right: 0;
    font-size: 10vw;
    line-height: 8.2vw;
  }
  
  .participants-graphic-title:nth-of-type(2)::before{
    top: 0;
    right: 0.4vw;
    width: 24.3vw;
    height: 30.5vw;
  }
  
  .participants-graphic-title:nth-of-type(3){
    margin-top: 3vw;
    font-size: 3.55vw;
    line-height: 3.2vw;
    margin-right: 1.6vw;
  }
  
  .participants-graphic-title:nth-of-type(4){
    font-size: 11.8vw;
    line-height: 8.6vw;
  }
  
  .participants-graphic-title:nth-of-type(4)::before{
    top: 0.2vw;
    left: 0.2vw;
    width: 22.3vw;
    height: 18.5vw;
  }
  
  .participants-graphic-title:nth-of-type(4)::after{
    top: 0;
    left: 0;
    font-size: 11.8vw;
    line-height: 8.6vw;
  }

  .participants-info-paragraph{
    margin-top: 8vw;
  }

  .participants-event-duration{
    width: 90%;
    text-align: center;
    margin-bottom: 8vw;
    margin-top: 8vw;
  }

  .participants-banner-image{
    height: 50vw;
    background-size: cover;
    background-position: 50% 68%;
  }
}