:root {
  --black: #000000;
  --white: #ffffff;
  --dragon-red: #7f2220;
  --dragon-dark-red: #9b302f;
  --dragon-black: #1b1b1b;
  --dragon-grey: #5f5b5b;
  --dragon-gold: #aa964d;
  --dragon-dark-gold: #bba24f;
  --dragon-cream-gold: #c0a375;
  --dragon-light-gold: #ffedae;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}


a {
  text-decoration: none;
}


.sidePanelContainer {
  display: flex;
  justify-content: space-between;
}

.leftCreativeSidePanel {
  width: fit-content;
 
}

.leftCreativeSidePanel .creative-side-panel {
  border-top-right-radius: 34px;
  border-bottom-right-radius: 34px;
}

.rightCreativeSidePanel {
  width: fit-content;
 
}

.rightCreativeSidePanel .creative-side-panel {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-top-left-radius: 34px;
  border-bottom-left-radius: 34px;
}

.rightCreativeSidePanel .creative-side-panel .panel-heading {
  border-top-right-radius: 0px;
  border-top-left-radius: 34px;
}

.creative-side-panel {
  background-color: var(--dragon-black);
  width: 300px;
  height: 600px;
  border-top-right-radius: 34px;
  border-bottom-right-radius: 34px;
  display: flex;
  flex-direction: column;
  align-items: center;

}

.panel-heading {
  height: 55px;
  width: 100%;
  background-color: var(--dragon-red);
  color: var(--dragon-dark-gold);
  border-top-right-radius: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: 0.05em;
  text-align: left;


  /* border: 1px solid;
  border-image-source: radial-gradient(41.02% 53341992.86% at 50% 2111.14%, #BBA24F 0%, rgba(187, 162, 79, 0) 100%),
    linear-gradient(0deg, #5F5B5B, #5F5B5B); */

    

}

.trailerVideoContainer {
  position: relative;
  width: 235px;
  height: 200px;
  margin: 0 auto;
  border-radius: 18.62px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 25px;
  margin-bottom: 25px;
  border-radius: 18.62px;
}

.trailerVideo {
  width: 100%;
  height: 100%;
  border-radius: 30px;
  object-fit: cover;
}

.playPauseButton {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}


.trailerTitleContainer {
  width: 226px;
  border-radius: 42px;
  text-align: center;
  font-size: 16px;
  padding: 3px;
  font-weight: 600;
  margin-bottom: 20px;
  background: radial-gradient(41.02% 53341992.86% at 50% 2111.14%,
      #bba24f 0%,
      rgba(187, 162, 79, 0.29) 100%);
}

.trailerTitle {
  color: var(--dragon-light-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0em;
  text-align: center;
}

.rightFacedArrow {
  margin-left: 5px;
}

.trailerDescription {
  width: 226px;
  height: 80px;
  /* border: 1px solid var(--dragon-gold); */
  color: var(--white);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  font-weight: 300;
  font-weight: lighter;
  margin-bottom: 20px;
  font-size: 16px;
  line-height: 19px;
  letter-spacing: 0em;
  text-align: left;
}

.trailerDescription::-webkit-scrollbar {
  display: none;
}

.trailerTeamMember {
  display: flex;
  width: 226px;
  height: 68px;
  margin-bottom: 20px;
  align-items: center;
}

.trailerTeamMember img {
  margin-right: 14px;
}

.memberInfo {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.memberName {
  color: var(--white);
  font-size: 18px;
  font-weight: 600;
  line-height: 21px;
  letter-spacing: 0em;
  text-align: left;
}

.memberRole {
  color: var(--dragon-grey);
  font-size: 16px;
  font-weight: 300;
  line-height: 19px;
  letter-spacing: 0em;
  text-align: left;
}

.viewMoreButton {
  display: flex;
  align-items: center;
  width: 226px;
  height: 28px;
  background: linear-gradient(270deg,
      rgba(127, 34, 32, 0) 8.98%,
      rgba(127, 34, 32, 0.21) 31.13%,
      #7f2220 91.02%);
}

.viewMoreTitle {
  display: flex;
  align-items: center;
  margin-left: 22px;
  color: var(--dragon-light-gold);
  font-size: 18px;
  font-weight: 600;
  line-height: 22px;
  letter-spacing: 0em;
  text-align: left;
}

.responsiveCorouselDiv {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media screen and (max-width: 1025px) {
  .leftCreativeSidePanel {
    margin-left: 0;
  }

  .rightCreativeSidePanel {
    margin-right: 0;
  }

  .creative-side-panel {
    width: 220px;
    height: 480px;

  }

  .trailerVideoContainer,
  .trailerTitleContainer,
  .trailerDescription,
  .trailerTeamMember,
  .viewMoreButton {
    width: 170px;
  }

  .trailerVideoContainer {
    height: 60%;
    margin: 20px;
  }

  .trailerVideo {
    border-radius: 13px;
    border: none;
    object-fit: cover ;
  }

  .playPauseButton {
    width: 22px;
    height: 22px;
  }

  .panel-heading {
    /* font-family: Roboto; */
    font-size: 18px;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: 0.05em;
    text-align: left;
    height: 20%;

  }

  .trailerTitle {
    /* font-family: Montserrat; */
    font-size: 12px;
    font-weight: 600;
    line-height: 15px;
    letter-spacing: 0em;
    text-align: center;
  }

  .rightFacedArrow {
    height: 12px;
  }

  .trailerDescription {
    /* font-family: Roboto; */
    font-size: 14px;
    font-weight: 300;
    line-height: 16px;
    letter-spacing: 0em;
    text-align: left;
    height: 135px;
  }

  .memberName {
    /* font-family: Roboto; */
    font-size: 16px;
    font-weight: 600;
    line-height: 19px;
    letter-spacing: 0em;
    text-align: left;
  }

  .memberRole {
    /* font-family: Roboto; */
    font-size: 14px;
    font-weight: 300;
    line-height: 16px;
    letter-spacing: 0em;
    text-align: left;

  }

  .viewMoreTitle {
    /* font-family: Montserrat; */
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0em;
    text-align: left;


  }

  .trailerTeamMember {
    margin-bottom: 10px;
  }

  .trailerTeamMember img {
    width: 48px;
    height: 48px;
  }

  .viewMoreButton {
    margin-bottom: 30px;
  }

}

@media screen and (max-width:600px) {

  .sidePanelContainer {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .rightCreativeSidePanel {
    display: none;
  }

  .leftCreativeSidePanel {
    margin: 0 10%;
  }

  .leftCreativeSidePanel .creative-side-panel {
    border-top-left-radius: 34px;
    border-bottom-left-radius: 34px;
  }

  .leftCreativeSidePanel .panel-heading {
    border-top-left-radius: 34px;
  }

  .creative-side-panel {
    width: 300px;
    height: 570px;
  }

  .panel-heading {
    /* font-family: Roboto; */
    font-size: 24px;
    font-weight: 600;
    line-height: 30px;
    letter-spacing: 0.05em;
    text-align: left;
    height: 15%;

  }

  .trailerVideoContainer,
  .trailerTitleContainer,
  .trailerDescription,
  .trailerTeamMember,
  .viewMoreButton {
    width: 240px;
  }

  .trailerVideo {
    border-radius: 20px;
  }

  .playPauseButton {
    width: 32px;
    height: 32px;
  }

  .trailerTitle {
    /* font-family: Montserrat; */
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0em;
    text-align: center;

  }

  .rightFacedArrow {
    height: 12px;
  }

  .trailerDescription {
    /* font-family: Roboto; */
    font-size: 14px;
    font-weight: 300;
    line-height: 16px;
    letter-spacing: 0em;
    text-align: left;

  }

  .memberName {
    /* font-family: Roboto; */
    font-size: 16px;
    font-weight: 600;
    line-height: 19px;
    letter-spacing: 0em;
    text-align: left;
  }

  .memberRole {
    /* font-family: Roboto; */
    font-size: 14px;
    font-weight: 300;
    line-height: 16px;
    letter-spacing: 0em;
    text-align: left;
  }

  .viewMoreTitle {
    /* font-family: Montserrat; */
    font-size: 18px;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: 0em;
    text-align: left;

  }

  .viewMoreTitle img {
    height: 10px;
  }

}