html {
  scroll-behavior: smooth;
}

body {
  background-color: #e7e7e7;
}

.servicesCont {
  padding: 14vh 20vh 3vh 20vh;
  background-color: #e7e7e7;
}

.advertising,
.event {
  background-color: #fff;
  padding: 14vh 20vh 3vh 20vh;
}

.leftImageCont {
  width: 100%;
  display: flex;
  position: relative;
  .image {
    background-image: url(../src/services/services-01.png);
    background-size: contain;
    background-position: top center;
    background-repeat: no-repeat;
    width: 35%;
    min-height: 100%;
    max-height: 75vh;
    height: 75vh;
  }
  .image02 {
    width: 40%;
    background-repeat: no-repeat;
    background-image: url(../src/services/services-02.png);
    background-size: contain;
    background-position: top center;
    min-height: 100%;
    max-height: 61vh;
    height: 61vh;
  }

  .image03 {
    background-image: url(../src/services/services-03.png);
    width: 40%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top center;
    min-height: 100%;
    max-height: 58vh;
    height: 58vh;
  }

  .content {
    position: relative;
    width: 65%;
    padding: 1vh;
    padding-left: 5vh;
    .title {
      font-size: 3.5vh;
      font-weight: bold;
      width: 50%;
    }
    .text {
      font-size: 1.5vh;
      padding: 1.5vh 0;
      text-align: justify;
      text-justify: inter-word;
    }
  }

  .contentRight {
    width: 60%;
    padding: 1vh;
    position: relative;
    padding-right: 5vh !important;
    .title {
      font-size: 3.5vh;
      font-weight: bold;
      width: 50%;
    }
    .text {
      font-size: 1.5vh;
      padding: 1.5vh 0;
      text-align: justify;
      text-justify: inter-word;
    }
  }

  .numberRight {
    position: absolute;
    aspect-ratio: 1 / 0.9;
    right: 15%;
    top: 10%;
    width: 8%;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(../src/services/01.png);
  }

  .arrowRight {
    padding-top: 24px;
    width: 24px;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url(../src/services/arrow-right-red.png);
  }

  .viewText {
    padding: 1.5vh 0;
    font-size: 1.5vh;
    color: #b32331;
    cursor: pointer;
  }
}
.number {
  position: absolute;
  aspect-ratio: 1 / 1;
  right: 0vh;
  top: 0;
  width: 22vh;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 1;
  background-image: url(../src/services/01.png);
}

.number02 {
  position: absolute;
  aspect-ratio: 1 / 1;
  right: 5vh;
  top: 2vh;
  width: 22vh;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 1;
  opacity: 0.3;
  background-image: url(../src/services/02.png);
}
.number03 {
  position: absolute;
  aspect-ratio: 1 / 1;
  right: 0vh;
  top: 0;
  width: 22vh;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 1;
  background-image: url(../src/services/03.png);
}
.number04 {
  position: absolute;
  aspect-ratio: 1 / 1;
  right: 5vh;
  top: 2vh;
  width: 22vh;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 1;
  opacity: 0.3;
  background-image: url(../src/services/04.png);
}
.number05 {
  position: absolute;
  aspect-ratio: 1 / 1;
  right: 0vh;
  top: 0;
  width: 22vh;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 1;
  background-image: url(../src/services/05.png);
}
.number06 {
  position: absolute;
  aspect-ratio: 1 / 1;
  right: 2vh;
  top: 2vh;
  width: 17vh;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 1;
  background-image: url(../src/services/06.png);
}

.service-coverer .title {
  display: block;
  width: 100%;
  font-size: 32px;
  font-weight: bold;
  color: #fff;
}

.container03 {
  display: flex;
  padding-top: 5%;
}

.container03 {
  .column {
    flex: 1;
    text-align: center;
    margin-right: 2%;
  }

  .column:last-child {
    margin-bottom: 0;
  }

  .thumbnail {
    position: relative;
    overflow: hidden;
    cursor: pointer;
  }

  .thumbnail img,
  .thumbnail video {
    max-width: 100%;
  }

  .play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .play-icon img {
    width: 90%;
  }

  .play-icon img:hover {
    transform: scale(1.1);
    transition: transform 1s;
  }

  .title {
    font-size: 3.5vh;
    font-weight: bold;
    margin-top: 1vh;
    text-align: left;
    width: 100%;
  }

  .subtitle {
    font-size: 1.5vh;
    color: #666;
    margin-top: 5px;
    text-align: left;
    text-align: justify;
    text-justify: inter-word;
  }
}

.image04 {
  background-image: url(../src/services/services-04.png);
  width: 40%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
  min-height: 100%;
  max-height: 60vh;
  height: 60vh;
}

.image05 {
  background-image: url(../src/services/services-05.png);
  width: 40%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
  min-height: 100%;
  max-height: 75vh;
  height: 75vh;
}

span {
  color: #b32331;
  display: inline-block;
}

.event {
  .service-coverer .title {
    display: block;
    width: 100%;
    font-size: 32px;
    font-weight: bold;
    color: #fff;
  }
}

.Cont06 {
  position: relative;
  .title {
    font-size: 3.5vh;
    font-weight: bold;
  }
  .text {
    font-size: 1.5vh;
    padding: 18px 0;
    text-align: justify;
    text-justify: inter-word;
  }

  .arrowRight {
    padding-top: 24px;
    width: 24px;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url(../src/services/arrow-right-red.png);
  }

  .viewText {
    padding: 1.5vh 0;
    font-size: 1.5vh;
    color: #b32331;
    cursor: pointer;
    bottom: 0;
    position: relative;
  }
}
.content06 {
  width: 40%;
  background-color: #e7e7e7;
  padding: 3vh;
  position: absolute;
  top: 3vh;
  bottom: 10%;
  overflow: hidden;
}

.editing {
  background-color: #fff !important;
  position: relative;
}

.image06 {
  width: 80%;
  display: block;
  height: 80vh;
  margin: 0 auto 0 20%;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(../src/services/services-06.png);
}

.video-buttons.phone {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  .change-video-btn {
    margin: 0;
  }
}

.aboutus.phone {
  display: block;
}

.phone .twofour54Logo {
  max-width: 60%;
  aspect-ratio: 1 / 1;
  margin-bottom: -25%;
}

.phone .columnFooter {
  padding-top: 30px;
}

.phone .columnFooter:last-child {
  padding-top: 30px;
  padding-bottom: 30px;
}

.phone .leftImageCont {
  display: block;
}

.phone .leftImageCont .image {
  width: 100%;
  aspect-ratio: 1 / 1;
  text-align: center;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(../src/services/services-01.png);
}

.phone .leftImageCont .content {
  width: 90%;
  padding-left: 3%;
  position: relative;
  padding-top: 20px;
}

.phone .projects {
  display: block;
  text-align-last: center;
}
.phone .project {
  width: 80%;
}
.white {
  background-color: #fff !important;
}

.phone .title {
  width: 100% !important;
}

.phone .leftImageCont .image02 {
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(../src/services/services-02.png);
}

.phone .leftImageCont .image03 {
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(../src/services/services-03.png);
}

.phone .leftImageCont .image04 {
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(../src/services/services-04.png);
}

.phone .image05 {
  width: 100%;
}

.phone .container03 {
  display: block;
  padding: 5%;
}

.phone .image06 {
  width: 100%;
  position: relative;
  top: 0;
  margin: 0;
  height: auto;
  display: block;
  aspect-ratio: 1 / 1;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(../src/services/services-06.png);
}

.content06.phone {
  width: 100%;
  padding: 20px 0px;
  margin-top: 0;
  background-color: #fff;
  overflow: hidden;
  position: relative;
}

.content06.phone .title {
  width: 50% !important;
}

.phone .viewText {
  position: relative;
}

.collapsible {
  color: #aaa;
  cursor: pointer;
  padding: 1.5vh 0;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 1.5vh;
  font-weight: bold;
  background-color: transparent;
}

.active,
.collapsible:hover {
  color: #000;
}

.collapsible.active {
  border-bottom: 0;
  background-color: transparent;
  color: #b32331;
}

.collapsible .arrowIconactive {
  display: none;
}

.collapsible.active .arrowIconactive {
  float: right;
  display: block;
  width: 2vh;
  padding-top: 2vh;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image: url(../src/services/arrow-red.png);
}

.collapsible.active .arrowIcon {
  display: none;
}

.arrowIcon {
  float: right;
  display: block;
  width: 2vh;
  padding-top: 2vh;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image: url(../src/services/arrow.png);
}

.collapsibleContent {
  display: block;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: transparent;
  color: #000;
  border-bottom: 1px solid #ccc;
}

.collapsibleContent p {
  display: none;
  margin: 0 0 30px 0;
}

.projects-container {
  position: relative;
  padding: 3vh 0;
  overflow: hidden;
}

.project {
  text-align: center;
  position: relative;
}

.projectprojectPhotoss {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  scroll-behavior: smooth;
  overflow-y: hidden;
}

.projectprojectPhotoss::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.projectPhotos {
  flex: 0 0 auto;
  margin: 0 15px;
  width: 250px; /* Set a fixed width */
  height: 140px; /* Set a fixed height */
}

.projectprojectPhotoss img,
.projectprojectPhotoss video {
  width: 100%;
  height: 100%;
  width: 250px;
  height: 150px !important;
  object-fit: cover;
  display: block;
}

.projectprojectPhotoss .projectPhoto {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 25%;
  aspect-ratio: 1 / 1;
  margin-top: 20px;
}

.shade-left,
.shade-right {
  z-index: 5;
  width: 25%;
  height: 100%;
  position: absolute;
  top: auto;
  bottom: 0%;
  pointer-events: none;
}

.shade-left {
  background: linear-gradient(
    90deg,
    rgb(231 231 231) 0%,
    rgba(255, 255, 255, 0) 100%
  ) !important;
  left: 0% !important;
  right: auto !important;
}

.shade-right {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgb(231 231 231) 100%
  ) !important;
  left: auto !important;
  right: 0% !important;
}

.event .shade-left {
  background: linear-gradient(
    90deg,
    rgb(255 255 255) 0%,
    rgba(255, 255, 255, 0) 100%
  );
}

.event .shade-right {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgb(255 255 255) 100%
  );
  .projectName {
    color: #fff;
    font-size: 26px;
    font-weight: bold;
    text-align: left;
    padding: 0 50px;
  }

  .projectPos {
    color: #fff;
    font-size: 18px;
    text-align: left;
    padding: 0 50px;
  }

  @keyframes moveRightToLeft {
    /* 0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(-100%);
    } */
  }
}

@media only screen and (max-width: 768px) {
  .leftImageCont {
    display: block !important;
  }
  .content,
  .contentRight {
    position: relative;
    width: 85vw !important;
    padding-top: 2vh !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .number,
  .number02,
  .number03,
  .number04,
  .number05,
  .number06 {
    right: 3vh !important;
    top: 2vh !important;
    width: 30% !important;
  }
  .image,
  .image0,
  .image02,
  .image03,
  .image04,
  .image05 {
    width: 100% !important;
    min-height: auto !important;
    max-height: auto !important;
    height: 31vh !important;
  }

  .imagePhone {
    width: 100%;
  }

  .content06 {
    position: relative;
    padding: 2vh;
    margin-top: 150px;
    width: 91%;
    z-index: 2;
    top: 0;
    bottom: 0;
  }

  .container03 {
    display: block;
  }

  .leftImageCont .column {
    display: block;
  }

  .image06 {
    display: block;
    position: absolute;
    top: -250px;
    width: 100%;
    margin: 0;
    z-index: 1;
  }

  .shade-left {
    left: -1px !important;
  }
}