@import './section-types/collage-circle.css';
@import './section-types/tile-chart.css';
@import './section-types/mc.css';
@import './section-types/bios.css';
@import './section-types/carousel.css';
@import './section-types/hexagon-collage.css';
@import './section-types/checklist.css';
@import './section-types/vertical-scroll.css';
@import './section-types/horizontal-scroll.css';

/* Three-columns template */
.handbook-wrapper .block-wrapper .block.three-columns {
  background-color: #aed8e6;
}

.handbook-wrapper .three-columns .row-content {
  display: flex;
  justify-content: space-between;
}

.handbook-wrapper .three-columns .row-content > div {
  width: calc(90% / 3);
}

.handbook-wrapper .three-columns .row-content p {
  text-align: center;
}
/* End Three-columns template */

/* new-templates */
/* 25x75 */
.handbook-wrapper .block-wrapper-content .block.columns_25x75 {
  background-color: #eac2c2;
}

.handbook-wrapper .columns_25x75 .row-content .col:nth-child(1) {
  width: 35%;
}
.handbook-wrapper .columns_25x75 .row-content .col:nth-child(2) {
  width: 60%;
}
/* 75x25 */

.handbook-wrapper .block-wrapper-content .block.columns_75x25 {
  background-color: #405960;
}

.handbook-wrapper .columns_75x25 .row-content .col:nth-child(1) {
  width: 60%;
}
.handbook-wrapper .columns_75x25 .row-content .col:nth-child(2) {
  width: 35%;
}
/* 25x50x25 */

.handbook-wrapper .block-wrapper-content .block.columns_25x50x25 {
  background-color: #490635;
}

.handbook-wrapper .columns_25x50x25 .row-content .col:nth-child(2n-1) {
  width: 25%;
}
.handbook-wrapper .columns_25x50x25 .row-content .col:nth-child(2) {
  width: 45%;
}

.handbook-wrapper .block.columns_25x75 h1,
.handbook-wrapper .block.columns_75x25 h1,
.handbook-wrapper .block.columns_25x50x25 h1 {
  font-weight: 500;
  text-transform: initial;
}

.handbook-wrapper .block.columns_25x75 p,
.handbook-wrapper .block.columns_75x25 p,
.handbook-wrapper .block.columns_25x50x25 p {
  font-size: 22rem;
  text-align: center;
}

.handbook-wrapper .block .row-content {
  display: flex;
  justify-content: space-between;
}
/* end-new-templates */

/* key-points-template */
/*------------------------------------ */
.handbook-wrapper .block-wrapper-content .block.key_points {
  color: black;
}

.handbook-wrapper .block-wrapper-content .block.key_points .row {
  display: block;
}

.handbook-wrapper .block-wrapper-content .block.key_points .value {
  width: 100%;
  padding: 50px 0;
}

.handbook-wrapper .block-wrapper-content .block.key_points .image-wrapper {
  width: 100%;
  padding-bottom: 0;
  height: 100%;
  position: relative;
  margin-bottom: 25px;
  text-align: center;
}

.handbook-wrapper .block-wrapper-content .block.key_points .image-wrapper img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

.handbook-wrapper .block.key_points .value p {
  text-align: center;
  margin-bottom: 0;
  padding: 0;
}

@media screen and (min-width: 768px) {
  .handbook-wrapper .block-wrapper-content .block.key_points .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    align-items: start;
    margin-top: 50px;
  }

  .handbook-wrapper .block-wrapper-content .block.key_points .value {
    width: calc((100% / 3) - 20px);
    text-align: center;
    padding: 0;
    margin: 0 10px 40px;
  }

  .handbook-wrapper .block-wrapper-content .block.key_points .image-wrapper {
    display: inline-block;
    overflow: hidden;
    width: 100%;
    padding-bottom: 100%;
    height: 0;
    position: relative;
    margin-bottom: 25px;
  }

  .handbook-wrapper
    .block-wrapper-content
    .block.key_points
    .image-wrapper
    img {
    width: 85%;
    height: 85%;
    position: absolute;
    border-radius: 50%;
    object-fit: cover;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
  }

  .handbook-wrapper .block-wrapper-content .block.key_points .value p {
    padding: 0 30px;
  }
}
@media screen and (max-width: 768px) {
  .handbook-wrapper .block-wrapper-content .block.key_points .value {
    padding: 30px 0;
  }
}

/* end-key-points-template */
/* table-grid-template */

/*------------------------------------ */
.handbook-wrapper .block-wrapper-content .table_grid {
  color: black;
}

.handbook-wrapper .block-wrapper-content .block.table_grid .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 20px 0;
  gap: 40px;
}

.handbook-wrapper .block-wrapper-content .block.table_grid .value {
  width: calc((100% / 2) - 30px);
  padding: 30px;
}

.handbook-wrapper .block.table_grid .value p {
  text-align: left;
  margin-bottom: 0px;
}

@media screen and (max-width: 768px) {
  .handbook-wrapper .block-wrapper-content .block.table_grid .row {
    gap: 20px;
    margin: 10px 0;
  }

  .handbook-wrapper .block-wrapper-content .block.table_grid .value {
    width: 90%;
    padding: 20px;
  }
}
/* end-table-grid-template */

/* right-title-image-template */
/*------------------------------------ */
.handbook-wrapper .block-wrapper-content .right_title_image,
.handbook-wrapper .block-wrapper-content .left_title_image {
  color: black;
  padding: 0;
}

.handbook-wrapper .block-wrapper-content .right_title_image .content,
.handbook-wrapper .block-wrapper-content .left_title_image .content {
  margin: 0;
  height: 100%;
  max-width: unset;
  padding: 0;
  width: 100%;
}

.handbook-wrapper .block-wrapper-content .block.right_title_image .row,
.handbook-wrapper .block-wrapper-content .block.left_title_image .row {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
}

.handbook-wrapper
  .block-wrapper-content
  .block.right_title_image
  .row
  .col-title,
.handbook-wrapper
  .block-wrapper-content
  .block.left_title_image
  .row
  .col-title {
  width: 50%;
}

.handbook-wrapper
  .block-wrapper-content
  .block.right_title_image
  .row
  .col-image,
.handbook-wrapper
  .block-wrapper-content
  .block.left_title_image
  .row
  .col-image {
  width: 50%;
  height: 100vh;
  position: sticky;
  top: 0;
}

.handbook-wrapper
  .block-wrapper-content
  .block.right_title_image
  .row
  .col-image
  .image,
.handbook-wrapper
  .block-wrapper-content
  .block.left_title_image
  .row
  .col-image
  .image {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.handbook-wrapper
  .block-wrapper-content
  .block.right_title_image
  .row
  .col-title,
.handbook-wrapper
  .block-wrapper-content
  .block.left_title_image
  .row
  .col-title {
  padding: 0 50px;
  max-height: 90vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: darkgrey #efefef;
}

.handbook-wrapper
  .block-wrapper-content
  .block.right_title_image
  .col-title::-webkit-scrollbar {
  width: 1px;
}
.handbook-wrapper
  .block-wrapper-content
  .block.left_title_image
  .col-title::-webkit-scrollbar {
  width: 1px;
}

.handbook-wrapper
  .block-wrapper-content
  .block.right_title_image
  .col-title::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
.handbook-wrapper
  .block-wrapper-content
  .block.left_title_image
  .col-title::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

.handbook-wrapper
  .block-wrapper-content
  .block.right_title_image
  .col-title::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}
.handbook-wrapper
  .block-wrapper-content
  .block.left_title_image
  .col-title::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}

.handbook-wrapper .right_title_image h1,
.handbook-wrapper .left_title_image h1 {
  text-align: left;
}
@media screen and (max-width: 768px) {
  .handbook-wrapper
    .block-wrapper-content
    .block.right_title_image
    .row
    .col-title
    h1,
  .handbook-wrapper
    .block-wrapper-content
    .block.left_title_image
    .row
    .col-title
    h1 {
    font-size: 45rem;
  }
  .handbook-wrapper
    .block-wrapper-content
    .block.right_title_image
    .row
    .col-title
    p,
  .handbook-wrapper
    .block-wrapper-content
    .block.left_title_image
    .row
    .col-title
    p {
    font-size: 20rem;
  }
}
/* end-right-title-image-template */

/* timeline-gird-template */
/*------------------------------------ */

.handbook-wrapper .block-wrapper-content .block.timeline_grid {
  background-color: #f0f1f3;
}

.handbook-wrapper .block-wrapper-content .block.timeline_grid .row {
  display: flex;
  flex-wrap: wrap;
}

.handbook-wrapper .block-wrapper-content .block.timeline_grid .row .value {
  width: calc((100% / 3) - 30px);
  background-color: #fff;
  padding: 30px;
  border-radius: 25px;
  margin: 15px;
}

.handbook-wrapper
  .block-wrapper-content
  .block.timeline_grid
  .row
  .value:nth-child(6n - 2) {
  transform: translateX(calc(200% + 60px));
}

.handbook-wrapper
  .block-wrapper-content
  .block.timeline_grid
  .row
  .value:nth-child(6n) {
  transform: translateX(calc(-200% - 60px));
}

.handbook-wrapper .block-wrapper-content .block.timeline_grid .row .value p {
  margin: 0;
}

.handbook-wrapper
  .block-wrapper-content
  .block.timeline_grid
  .row
  .value
  .arrow {
  position: absolute;
  top: 50%;
  right: -29px;
  width: 27px;
  height: 3px;
  transform: translateY(-50%);
  background: #00a7ff;
}

.handbook-wrapper
  .block-wrapper-content
  .block.timeline_grid
  .row
  .value
  .arrow::before,
.handbook-wrapper
  .block-wrapper-content
  .block.timeline_grid
  .row
  .value
  .arrow::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 2px;
  right: -8px;
  background-color: #00a7ff;
}

.handbook-wrapper
  .block-wrapper-content
  .block.timeline_grid
  .row
  .value:nth-child(6n + 1)
  .arrow::before,
.handbook-wrapper
  .block-wrapper-content
  .block.timeline_grid
  .row
  .value:nth-child(6n + 2)
  .arrow::before {
  top: 4px;
  transform: rotate(-45deg);
  right: -2px;
}

.handbook-wrapper
  .block-wrapper-content
  .block.timeline_grid
  .row
  .value:nth-child(6n + 1)
  .arrow::after,
.handbook-wrapper
  .block-wrapper-content
  .block.timeline_grid
  .row
  .value:nth-child(6n + 2)
  .arrow::after {
  right: -2px;
  top: -3px;
  transform: rotate(45deg);
}

.handbook-wrapper
  .block-wrapper-content
  .block.timeline_grid
  .row
  .value:nth-child(6n + 3)
  .arrow::before,
.handbook-wrapper
  .block-wrapper-content
  .block.timeline_grid
  .row
  .value:nth-child(6n + 6)
  .arrow::before {
  transform: rotate(225deg);
  bottom: 2px;
  right: -1px;
}

.handbook-wrapper
  .block-wrapper-content
  .block.timeline_grid
  .row
  .value:nth-child(6n + 3)
  .arrow::after,
.handbook-wrapper
  .block-wrapper-content
  .block.timeline_grid
  .row
  .value:nth-child(6n + 6)
  .arrow::after {
  bottom: 2px;
  left: -1px;
  transform: rotate(315deg);
}

.handbook-wrapper
  .block-wrapper-content
  .block.timeline_grid
  .row
  .value:nth-child(6n + 3)
  .arrow,
.handbook-wrapper
  .block-wrapper-content
  .block.timeline_grid
  .row
  .value:nth-child(6n + 6)
  .arrow {
  width: 2px;
  height: 27px;
  bottom: -29px;
  left: 50%;
  top: auto;
  right: auto;
  transform: translateX(-50%);
}

.handbook-wrapper
  .block-wrapper-content
  .block.timeline_grid
  .row
  .value:nth-child(6n + 4)
  .arrow,
.handbook-wrapper
  .block-wrapper-content
  .block.timeline_grid
  .row
  .value:nth-child(6n + 5)
  .arrow {
  top: 50%;
  left: -30px;
  transform: translateY(-50%);
}

.handbook-wrapper
  .block-wrapper-content
  .block.timeline_grid
  .row
  .value:nth-child(6n + 4)
  .arrow::before,
.handbook-wrapper
  .block-wrapper-content
  .block.timeline_grid
  .row
  .value:nth-child(6n + 5)
  .arrow::before {
  top: 4px;
  transform: rotate(224deg);
  left: -2px;
}

.handbook-wrapper
  .block-wrapper-content
  .block.timeline_grid
  .row
  .value:nth-child(6n + 4)
  .arrow::after,
.handbook-wrapper
  .block-wrapper-content
  .block.timeline_grid
  .row
  .value:nth-child(6n + 5)
  .arrow::after {
  top: -3px;
  transform: rotate(315deg);
  left: -2px;
}

.handbook-wrapper
  .block-wrapper-content
  .block.timeline_grid
  .row
  .value:last-child
  .arrow {
  display: none;
}
/* end-timeline-gird-template */

@media screen and (max-width: 768px) {
  .handbook-wrapper .block .row-content {
    display: block;
  }
  .handbook-wrapper .block .row-content .col {
    width: 100% !important;
    margin: 0 !important;
  }

  /* three-columns */
  .handbook-wrapper .three-columns .row-content {
    display: block;
  }
  .handbook-wrapper .three-columns .row-content > div {
    width: 100%;
  }
  /* End three-columns */

  /* Timeline grid */
  .handbook-wrapper
    .block-wrapper-content
    .block.timeline_grid
    .row
    .value:nth-child(n) {
    width: 100%;
    margin: 15px 0;
    transform: none;
  }

  .handbook-wrapper
    .block-wrapper-content
    .block.timeline_grid
    .row
    .value:nth-child(n)
    .arrow {
    width: 2px;
    height: 27px;
    bottom: -29px;
    left: 50%;
    top: auto;
    right: auto;
    transform: translateX(-50%);
  }

  .handbook-wrapper
    .block-wrapper-content
    .block.timeline_grid
    .row
    .value:nth-child(n)
    .arrow::before {
    transform: rotate(225deg);
    bottom: 2px;
    right: -1px;
    top: unset;
    left: unset;
  }

  .handbook-wrapper
    .block-wrapper-content
    .block.timeline_grid
    .row
    .value:nth-child(n)
    .arrow::after {
    bottom: 2px;
    left: -1px;
    transform: rotate(315deg);
    top: unset;
  }
  /* End Timeline grid */

  /* left/right title  image */
  .handbook-wrapper
    .block-wrapper-content
    .block.right_title_image
    .row
    .col-title,
  .handbook-wrapper
    .block-wrapper-content
    .block.left_title_image
    .row
    .col-title {
    padding: 0 20px;
  }

  .handbook-wrapper
    .block-wrapper-content
    .block.right_title_image
    .row
    .col-image,
  .handbook-wrapper
    .block-wrapper-content
    .block.left_title_image
    .row
    .col-image {
    max-height: 50vh;
    width: 45%;
  }
  .handbook-wrapper
    .block-wrapper-content
    .block.left_title_image
    .row
    .col-title,
  .handbook-wrapper
    .block-wrapper-content
    .block.right_title_image
    .row
    .col-title {
    max-height: 45vh;
    width: 55%;
  }
  /* End left/right title  image */
}