/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
    Add your custom styles here
*/

.timeline {
  position: relative;
}

.milestones {
  width: 8px;
  margin: 50px auto 150px;
  position: relative;
}
@media (max-width: 768px) {
  .milestones {
    width: 100%;
    margin: 50px auto;
  }
}

.milestone-trail {
  position: absolute;
  top: 0;
  left: 6px;
  width: 3px;
  height: 0;
  background-color: #00464f;
}

.single-milestone {
  width: 12px;
  height: 12px;
  border-radius: 100%;
  position: relative;
  left: -8px;
  margin-bottom: 100px;
}

.single-milestone::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background-color: #00464f;
  border-radius: 100%;
  -webkit-transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0.3s;
  -ms-transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0.3s;
  -o-transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0.3s;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0.3s;
}

.single-milestone[inview="1"]::after {
  top: 7px;
  left: 1px;
  width: 12px;
  height: 12px;
  -webkit-transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;
  -ms-transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;
  -o-transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;
}

.single-milestone-container {
  position: absolute;
  top: 0;
  width: 45vw;
  max-width: 450px;
}

.single-milestone:nth-child(2n + 1) .single-milestone-container {
  left: 0;
}

.single-milestone:nth-child(2n + 2) .single-milestone-container {
  right: 0;
}

.milestone-line {
  width: 0;
  height: 3px;
  position: absolute;
  background-color: #00464f;
  top: 12px;
  -webkit-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;
  -ms-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;
  -o-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;
}

.single-milestone[inview="1"] .milestone-line {
  width: calc(50% - 20px);
  -webkit-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0.3s;
  -ms-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0.3s;
  -o-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0.3s;
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0.3s;
}

.single-milestone:nth-child(2n + 1) .milestone-line {
  left: 8px;
}

.single-milestone:nth-child(2n + 2) .milestone-line {
  right: 8px;
}

.milestone-content {
  width: 280px;
  position: absolute;
  top: -40px;
  max-height: 0;
  overflow: hidden;
  -webkit-transition: all 0.5s ease 0s;
  -ms-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
}
.milestone-content .content {
  font-size: 16px;
  font-weight: 400;
  line-height: 125%;
  margin-bottom: 23px;
  margin-top: 0;
  text-align: left;
}
@media (max-width: 768px) {
  .milestone-content .content {
    margin-bottom: 5px;
  }
}
.milestone-content .date {
  color: #00464f;
  margin-top: 0;
  font-size: 45px;
  font-weight: 900;
  letter-spacing: 3px;
  line-height: 125%;
  margin-bottom: 0;
}
.milestone-content .title {
  color: #00464f;
  margin-top: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 125%;
  margin-bottom: 0;
}

.single-milestone[inview="1"] .milestone-content {
  max-height: 270px;
  -webkit-transition: all 0.5s ease-in 0.7s;
  -ms-transition: all 0.5s ease-in 0.7s;
  -o-transition: all 0.5s ease-in 0.7s;
  transition: all 0.5s ease-in 0.7s;
}

.single-milestone:nth-child(2n + 1) .milestone-content {
  left: 50%;
}

.single-milestone:nth-child(2n + 2) .milestone-content {
  right: 50%;
}

.single-milestone:nth-child(2n + 2) .milestone-content .date,
.single-milestone:nth-child(2n + 2) .milestone-content .title,
.single-milestone:nth-child(2n + 2) .milestone-content .content {
  text-align: right !important;
}

@media (max-width: 1024px) {
  .single-milestone[inview="1"] .milestone-line {
    width: calc(40% - 20px);
  }
  .single-milestone:nth-child(2n + 1) .milestone-content {
    left: 40%;
  }
  .single-milestone:nth-child(2n + 2) .milestone-content {
    right: 40%;
  }
  .milestones {
    width: 100%;
    margin: 60px 0 0;
  }
  .single-milestone {
    width: 100%;
    height: auto;
    border-radius: 0;
    position: static;
    margin-bottom: 20px;
  }
  .milestone-line,
  .milestone-trail,
  .single-milestone::after {
    display: none;
  }
  .single-milestone-container {
    position: static;
    width: 100%;
  }
  .milestone-content {
    position: static;
    width: 100%;
  }
}