/*
 Theme Name:   Bothwell Accurate
 Description:  Bricks child theme, customized for Bothwell-Accurate.
 Author:       Oxford County Web Design
 Author URI:   https://oxfordcountywebdesign.ca/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/**********************************************************************************
 * Global Styles
 * 
 * Description: Global styles for additional classes used in Bricks Builder.
 * Note: All other styles should be adjusted using the builder for consistency.
 **********************************************************************************/

.primary-blue-text {
  color: var(--bricks-color-fwrmsc);
}

.secondary-blue-text {
  color: var(--bricks-color-qbucgv);
}

.custom-timeline-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
}

.custom-timeline-item {
  position: relative;
  padding: 4rem 0;
}

.custom-timeline-item::before {
  content: "";
  position: absolute;
  left: 50%;
  width: 10px;
  top: 0;
  bottom: 0;
  background-color: #3178c6;
  transform: translateX(-50%);
  z-index: 0;
}

.custom-timeline-item:first-child::before {
  top: 35%;
}

.custom-timeline-item:last-child::before {
  bottom: 65%;
}

.custom-timeline-dot {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: #3178c6;
  z-index: 1;
}

.custom-timeline-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: 2rem;
  margin-right: 2rem;
  column-gap: 2rem;
  margin-top: -10px;
}

.custom-timeline-item-title {
  text-align: right;
  width: 45%;
}

.custom-timeline-item-description {
  width: 45%;
  text-align: left;
}

@media (max-width: 768px) {
  .custom-timeline-content {
    flex-direction: column;
    align-items: flex-start;
    margin-left: 7rem;
    margin-right: 0;
    gap: 1.5rem;
    width: 70%;
  }

  .custom-timeline-item-title,
  .custom-timeline-item-description {
    width: 100%;
    text-align: left;
  }

  .custom-timeline-item::before {
    left: 3.45rem;
    transform: none;
  }

  .custom-timeline-dot {
    left: 2.5rem;
    transform: none;
  }

  .custom-timeline-item:first-child::before {
    top: 30%;
  }

  .custom-timeline-item:last-child::before {
    bottom: 70%;
  }
}