/*graphic section css*/

.graphic {
  cursor: pointer;
}

.graphic-section {
  margin-top: 15%;
  padding-bottom: 3%;
  background: linear-gradient(236.61deg, rgba(140, 42, 171, 0.1) 12.66%, rgba(0, 163, 197, 0.1) 84.41%);
}

.graphic-mobile-section {
  margin: 10% 0%;
  padding-bottom: 10%;
  background: linear-gradient(236.61deg, rgba(140, 42, 171, 0.1) 12.66%, rgba(0, 163, 197, 0.1) 84.41%);
}

.graphic-recording-title {
  color: #F6304F;
  font-family: "Rakuten Sans UI Bold";
  text-align: center;
  font-size: 36px;
  font-style: normal;
  line-height: 34px;
  text-transform: uppercase;
  padding-top: 50px; /*40px*/
}

.graphic-recording-text {
  text-align: center;
  padding-top: 0.5em;
  font-size: 18px;
}

.courosal-controll a:hover img {
  filter: brightness(1);
}

.courosal-controll .circle-bg {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: rgb(255, 192, 224);
  display: none;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.courosal-controll a:hover .circle-bg {
  display: flex; /* Show circle on hover */
}

.carousel-indicators [data-target] {
  max-width: 4.9rem;
  min-width: 3.9rem;
  opacity: 1;
  margin: +0.3rem 0;
  border-radius: 0%;
  height: 0.2rem;
  background-color: #D1D1D1;
}

.carousel-indicators .active {
  background-color: #cf18c0;
}

.graphic-recording-content {
  font-size: 14px;
  width: 85%;
  margin: auto;
  text-align: center;
  padding: 0.5rem 0rem;
}

.gr-desk-cl-bio p {
  display: flex;
  min-height: 70px;
  align-items: center;
  justify-content: center;
}


.graphic_recordings .card-title {
  font-family: "Rakuten Sans UI Bold";
  cursor: default;
}


.graphic-modal {
  border-radius: 40px;
  text-align: center;
  height: 100%;
}

.img-popup {
  padding: 0px 0px 0px 10px;
  max-width: 100%;
  height: auto;
  max-height: 435px;
}

.courosal-controll img {
  line-height: 20px;
  vertical-align: middle;
  margin-top: -0.05rem;
  width: 20px;
  z-index: 1;
}

.graphic-carousel-div {
  margin-top: 30px;
}

.graphic_recordings .owl-theme .owl-dots .owl-dot span {
  width: 10px;
  height: 4px;
  margin: 4px 0px;
  background: #D6D6D6;
  display: block;
  -webkit-backface-visibility: visible;
  transition: opacity .2s ease;
  border-radius: 0px;
}

.graphic_recordings .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot.active:hover span {
  background: #cf18c0 !important;
}

.graphic_recordings .owl-theme .owl-dots .owl-dot:focus {
  outline: none !important;
}

.graphic_recording_row {
  background-image: url("/forexecutives/static/img/event_access/venue-section-background@2x.jpg");
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin: 0% 1%;
  max-height: 30vh;
}

.graphic_recording_row1 {
  top: 0.5%;
  position: relative;
}

.graphic_recording_row2 {
  bottom: 20%;
  position: relative;
}

.graphic_recording_row3 {
  bottom: 25%;
  position: relative;
}

.graphic_recording_row4 {
  bottom: 45%;
  position: relative;
}

.graphic_recording_row2 .col-xs-5, .graphic_recording_row2 .col-sm-3, .graphic_recording_row1 .col-xs-5, .graphic_recording_row1 .col-sm-3, .graphic_recording_row3 .col-xs-5, .graphic_recording_row3 .col-sm-3, .graphic_recording_row4 .col-xs-5, .graphic_recording_row4 .col-sm-3 {
  padding: 1%
}

.graphic-image:hover {
  animation: shake 0.5s;
  animation-iteration-count: infinite;
}

.graphic-image-border {

  position: relative;

  z-index: 1 !important; /* Ensure the image is above the background */


}


.graphic-image {
  display: block;
  height: auto;

  position: relative;

  background-image: url('/rtc2024/static/img/graphic_recording/graphic_record_pattern.svg');

  background-position: top 0 right 0px; /* Adjust as needed */

  background-repeat: no-repeat; /* Adjust as needed */

  padding: 15px 15px 0px; /* Adjust as needed */

}


.graphic-recording-content {

  position: relative;

  z-index: 2 !important; /* Ensure the text is above the background */

  color: #000000; /* Adjust text color as needed */

}

.gr_container {

  padding: 1rem 5rem;

}

@media (max-width: 991px) {
  .graphic-recording-content {
    font-size: 14px;
    padding: 0rem;
  }

  .gr-desk-cl-bio p {
    margin-top: 5px;
    display: flex;
    min-height: 60px;
    align-items: center;
    justify-content: center;
  }

  .graphic-modal-text {
    margin-top: 5px;
    display: flex;
    min-height: 75px;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    color: #000000;
  }
}

@media (max-width: 768px) {
  .graphic-recording-title {
    font-size: 30px; /*36*/
    justify-content: center;
  }

  .graphic-modal {
    font-size: 0.875em;
  }
}

@media only screen and (max-width: 767px) {
  .gr-popup .modal-dialog {
    align-items: center;
  }

  .graphic-recording-text {
    font-size: 14px;
  }
}

#graphicSectionCarousel .disabled-button {
  opacity: 0.3 !important;
  cursor: default;
}

#graphicSectionCarousel .disabled-button .circle-bg:hover, #graphicSectionCarousel .disabled-button .circle-bg {
  background: None !important;
}

#graphicSectionCarousel .carousel-item {
  min-height: 68vh;
}

@media only screen and (max-width: 1350px) and (min-width: 992px) {
  #graphicSectionCarousel .carousel-item {
    min-height: 52vh;
  }

  .pallet-overflow {
    height: 470px
  }

  .row-3_half {
    height: 240px;
  }
}

.graphic_recordings .owl-theme .owl-nav.disabled + .owl-dots {
  margin-top: 20px;
}

.graphic-modal-text {
  margin-top: 5px;
  display: flex;
  min-height: 65px;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  color: #000000;
}

@media (min-width: 1181px) {
  .graphic_recordings .courosal-controll .carousel-indicators [data-target] {
    min-width: 4.9rem;
  }

  .pallet-overflow {
    height: 500px
  }

  .row-3_half {
    height: 250px;
  }
}

@media (min-width: 1297px) {
  .pallet-overflow {
    height: 550px
  }

  .row-3_half {
    height: 275px;
  }
}

@media (min-width: 1441px) {
  .pallet-overflow {
    height: 650px
  }

  .row-3_half {
    height: 325px;
  }
}

@media (min-width: 1800px) {
  .pallet-overflow {
    height: 750px
  }

  .row-3_half {
    height: 375px;
  }
}