/* ======= Procedures Module ======= */

:root {
  --area-heading-height: 60px;
}


.mod-spotlight {
  position: relative;
  .dot-container {
    font-size: 22px;
    font-weight: var(--fw-light);
    font-family: var(--secondary-font);
    text-transform: uppercase;
    color: var(--light-color);
    cursor: pointer;
    position: relative;
    z-index: 10;
    padding: 0 20px;
    margin-bottom: 40px;
    @media (width >= 768px) {
      font-size: 30px;
      padding: 0 40px;
    }
    @media (width >= 1024px) {
      margin-bottom: 95px;
      padding: 0 40px;
    }
    .owl-dot-wrap {
      display: flex;
      flex-direction: column;
      column-gap: 30px;
      row-gap: 30px;
      align-items: center;
      @media (width >= 768px) {
        row-gap: 35px;
      }
      @media (width >= 1215px) {
        flex-direction: row;
        justify-content: center;
        column-gap: 55px;
      }
    }
    .owl-dot {
      padding: 10px 20px;
      border: 1px solid var(--light-color);
      border-top: 1px solid transparent;
      border-bottom: 1px solid transparent;
      transition: .8s ease-in-out;
      text-align: center;
      border-radius: 0;
      width: auto;
      height: auto;
      @media (width >= 768px) {
        padding: 20px 40px;
      }
      @media (width >= 1215px) {
        display: flex;
        align-items: center;
        height: 100%;
      }
      &.active, 
      &:hover {
        color: var(--primary-highlight);
        border: 1px solid var(--primary-highlight);
        border-left: 1px solid transparent;
        border-right: 1px solid transparent;
      }
    }
  }

  .bg-photo {
		min-height: 60vw;
		padding-right: 25px;
    position: relative;
		@media (width >= 768px) {
			padding-left: 40px;
			padding-right: 85px;
			min-height: 45vw;
		}
		@media (width >= 1024px) {
			min-height: 15vw;
      padding-left: 0;
			padding-right: 50px;
		}
    &:after {
      content: "";
      width: 25px;
      height: calc(100% - 148px);
      background-color: var(--primary-highlight);
      top: 50%;
      right: 0;
      bottom: 0;
      position: absolute;
      transform: translateY(-50%);
      @media (width >= 768px) {
        width: 50px;
        height: calc(100% - 272px);
        transform: translate(-35px, -50%);
      }
      @media (width >= 1024px) {
        height: calc(100% - 264px);
        transform: translateY(-50%);
      }
    }
		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: center;
		}
	}

  .spotlight-procedure {
    @media (width >= 1024px) {
      display: flex;
      flex-direction: row;
      column-gap: 45px;
    }
    >div {

      /* Desktop Styles */
      @media (width >= 1024px) {
        width: 50%;
      }
    }
  }

	.spotlight-wrap {
		padding: 45px 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    @media (width >= 768px) {
      padding: 60px 40px;
    }
    @media (width >= 1024px) {
      padding-top: 110px;
      padding-bottom: 110px;
    }
    h3, .h3 {
      margin-top: 0;
      font-size: 30px;
      line-height: 1.2em;
      font-weight: var(--fw-semi-bold);
      text-transform: uppercase;
      text-wrap: unset;
      @media (width >= 768px) {
        font-size: 50px;
      }
    } 
    .spotlight-contain {
      max-width: 630px;
    }
    .button {
      margin-top: 1em;
    }
	}

}