@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';
@import './section-types/key-points.css';
@import './section-types/table-grid.css';
@import './section-types/flip-card.css';

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

.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: white;
}

.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: white;
}

.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: white;
}

.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 */

/* 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-title p:last-child,
.handbook-wrapper .block-wrapper-content .block.left_title_image .row .col-title p:last-child {
  margin-bottom: 0;
}

.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: 100%;
}

.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: 75px 40px;
  max-height: 95%;
  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;
}

/* 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;
  margin-bottom: 20px;
}

.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.no-arrow {
  justify-content: center;
}

.handbook-wrapper .block-wrapper-content .block.timeline_grid .row.no-arrow .value {
  transform: none;
}

.handbook-wrapper .block-wrapper-content .block.timeline_grid .row .value p {
  text-align: center;
}

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

@media screen and (max-width: 1024px) {
  .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: calc(70vh + 40px);
  }

  .handbook-wrapper .block-wrapper-content .block.right_title_image .row .col-image img.image,
  .handbook-wrapper .block-wrapper-content .block.left_title_image .row .col-image img.image {
    height: calc(70vh + 40px);
  }

  .handbook-wrapper .block-wrapper-content .block.right_title_image .row .col-title,
  .handbook-wrapper .block-wrapper-content .block.left_title_image .row .col-title {
    max-height: 70vh;
    margin: 20px 0;
  }
}

@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;
  }

  /* Reset desktop positioning transforms on mobile, but preserve AOS animations */
  .handbook-wrapper
    .block-wrapper-content
    .block.timeline_grid
    .row
    .value:nth-child(6n - 2):not([data-aos]),
  .handbook-wrapper
    .block-wrapper-content
    .block.timeline_grid
    .row
    .value:nth-child(6n):not([data-aos]) {
    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-image,
  .handbook-wrapper .block-wrapper-content .block.left_title_image .row .col-image {
    max-height: calc(50vh + 20px);
  }

  .handbook-wrapper .block-wrapper-content .block.right_title_image .row .col-image img.image,
  .handbook-wrapper .block-wrapper-content .block.left_title_image .row .col-image img.image {
    height: calc(50vh + 20px);
  }

  .handbook-wrapper .block-wrapper-content .block.left_title_image .row .col-title,
  .handbook-wrapper .block-wrapper-content .block.right_title_image .row .col-title {
    padding: 15px 20px;
    max-height: 50vh;
    margin: 10px 0;
  }
  /* End left/right title  image */
}

@media screen and (max-width: 540px) {
  .handbook-wrapper .block-wrapper-content .block.left_title_image .row .col-title,
  .handbook-wrapper .block-wrapper-content .block.right_title_image .row .col-title {
    padding: 15px;
  }
}

[data-aos='fade-up-timeline-grid-6n'] {
  opacity: 0;
  transform: translateX(calc(-200% - 60px)) translateY(40px) !important;
  transition-property: opacity, transform;
}
[data-aos='fade-up-timeline-grid-6n'].aos-animate {
  opacity: 1;
  transform: translateX(calc(-200% - 60px)) translateY(0) !important;
}

[data-aos='fade-up-timeline-grid-6n-2'] {
  opacity: 0;
  transform: translateX(calc(200% + 60px)) translateY(40px) !important;
  transition-property: opacity, transform;
}
[data-aos='fade-up-timeline-grid-6n-2'].aos-animate {
  opacity: 1;
  transform: translateX(calc(200% + 60px)) translateY(0) !important;
}

[data-aos='fade-up-timeline-grid'] {
  opacity: 0;
  transform: translateY(40px) !important;
  transition-property: opacity, transform;
}
[data-aos='fade-up-timeline-grid'].aos-animate {
  opacity: 1;
  transform: translateY(0) !important;
}

/* Mobile-specific overrides for timeline grid animations */
@media screen and (max-width: 768px) {
  [data-aos='fade-up-timeline-grid-6n'],
  [data-aos='fade-up-timeline-grid-6n-2'] {
    opacity: 0;
    transform: translateY(40px) !important;
    transition-property: opacity, transform;
  }

  [data-aos='fade-up-timeline-grid-6n'].aos-animate,
  [data-aos='fade-up-timeline-grid-6n-2'].aos-animate {
    opacity: 1;
    transform: translateY(0) !important;
  }
}
