.adv_wrapper {
    width:90%;
    height:550px;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: auto;
    position: relative; 
}

.element-animation1 { transform: translateY(100px); opacity: 0; }   
.element-animation2 { transform: translateY(-100px); opacity: 0; }  
.element-animation3 { transform: translateY(100px); opacity: 0; } 
.element-animation4 { transform:scale(0.8);} 
.element-animation5 { transform:scale(1.1);} 
.element-animation6 { transform:scale(0.8);} 


[class*="element-animation"].element-show {
  opacity: 1;
  transform: translate(0) scale(1) rotate(0);
  transition: 1s;
}

.line {
    width: 100%;
    border: 1px solid #B5B5B5;
    position: absolute; 
    top: 50%;
    left: 0;
    z-index: 1;
}

.advblock {
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    z-index: 5;
    position: relative; 
}


.text_top {
    margin-bottom: 10px;
    position: absolute;
    bottom: 100%; 
    font-size: 20px;
}

.text_bottom {
    margin-top: 10px;
    position: absolute;
    top: 100%;
    font-size: 20px;
}

.advblock img {    
    display: block;
    width: 100px;
}

.i1 
{margin-top: -95px;}

.i2 
{margin-bottom: -95px;}


:root {
  --primary-blue: #4a86bd; /* Цвет линии и точек */
  --text-color: #444;
  --bg-color: #f8f9fa;
}

.control-block {
  text-align: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.title {
  font-size: 32px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
}

.description {
  font-size: 16px;
  color: #666;
  max-width: 800px;
  margin: 0 auto 60px;
  line-height: 1.5;
}


.timeline {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin-top: 40px;
}



.timeline-line {
  position: absolute;
  top: 10px;
  left: 0;
  height: 2px;
  background-color: #c9d6df;
  z-index: 1;
  width: 0; 
}


.timeline-item {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 10px;
  opacity: 0;
  transform: translateY(20px);
}



.control-block.active .timeline-line {
  animation: grow-line 1.5s ease-out forwards;
}

.control-block.active .timeline-item {
  animation: fadeInUp 0.6s ease-out forwards;
}


.control-block.active .timeline-item:nth-child(2) { animation-delay: 0.2s; }
.control-block.active .timeline-item:nth-child(3) { animation-delay: 0.5s; }
.control-block.active .timeline-item:nth-child(4) { animation-delay: 0.8s; }
.control-block.active .timeline-item:nth-child(5) { animation-delay: 1.1s; }
.control-block.active .timeline-item:nth-child(6) { animation-delay: 1.4s; }
.control-block.active .timeline-item:nth-child(7) { animation-delay: 1.7s; }


@keyframes grow-line { from { width: 0; } to { width: 100%; } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }


@keyframes pulse-animation {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(74, 134, 189, 0.7); }
  70% { transform: scale(1.2); box-shadow: 0 0 0 15px rgba(74, 134, 189, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(74, 134, 189, 0); }
}

.timeline-item:hover .dot {
  animation: pulse-animation 1.5s infinite ease-in-out;
  cursor: pointer;
  background-color: #2c5e8c;
}


.dot {
  width: 14px;
  height: 14px;
  background-color: var(--primary-blue);
  border: 6px solid #ffffff;
  border-radius: 50%;
  margin-bottom: 13px;
  box-shadow: 0 0 0 4px var(--bg-color); 
}


.label {
  font-size: 13px;
  color: var(--text-color);
  line-height: 1.3;
  word-wrap: break-word;
}


.adv_wrapper_second 
{width: 100%;
margin-top:150px;}



.adv_select_outer {
    background-color: #e7ede38d;    
    padding-top: 40px;
    position: relative;
    z-index:7;
    overflow: visible;
    width: 70%;
    height:200px;    
    border-top-left-radius:20px;
    border-top-right-radius:20px;
    margin-left:15%;
    margin-bottom: -60px;
    transform: translateY(-60px);
}

.adv_select 
{width:90%;
height:300px;
margin-left:5%;
border-radius: 20px;
position: relative;
z-index:55 !important;
background: #FFFFFF;
border: 3px solid #93C477;
border-bottom: 20px;}

.green_bottom 
{background:#99CE7C;
width: 100%;
height: 215px;
display: flex;
position: relative;
z-index:4;
justify-content: center;}

@media screen and (max-width:768px) {

.adv_wrapper {
        display: flex;
        flex-direction: column;
        height: auto;
        padding: 20px 0 20px 20px; 
        gap: 30px;
        position: relative;
    }

    
    .line {
        width: 2px; 
        height: 90%;
        top:0;
        left: 51px; 
        border: none;
        background-color: #B5B5B5;
        position: absolute;
        z-index: 1;
        margin-top: -13px;
        margin-bottom: -13px;
    }

    .advblock {
        display: flex !important;
        flex-direction: row !important; 
        align-items: center;
        width: 100%;
        margin: 0 !important;
        position: relative;
        z-index: 2;
    }

    
    .advblock.i1 {
        flex-direction: row-reverse !important;
        justify-content: flex-end;
        margin-left: -36px !important;
    }

    .advblock.i2 {       
        margin-left: -36px !important;
    }

   
    .advblock img {
        width: 60px;
        height: auto;
        flex-shrink: 0;
        background: #fff; 
        padding:0px 0px;
        margin-right: 20px;       
        margin-left: 20px; 
    }

    
    .text_top, .text_bottom {
        position: static !important;
        text-align: left;
        font-size: 15px;
        line-height: 1.4;
        margin: 0;
        padding: 0 15px 0 0;
        color: #333;
        flex: 1;
    }
    
   
    .text_top p, .text_bottom p {
        margin: 0;
    }


  .timeline {
    flex-direction: column;
    align-items: flex-start;
    padding-left: 30px; 
    gap: 30px; 
  }


  .timeline-line {
    width: 2px !important; 
    height: 0; 
    left: 42px; 
    top: 0;
  }


  @keyframes grow-line-vertical {
    from { height: 0; }
    to { height: 100%; }
  }

 
  .control-block.active .timeline-line {
    animation: grow-line-vertical 1.5s ease-out forwards;
  }

  
  .timeline-item {
    flex-direction: row !important; 
    align-items: flex-start !important; 
    text-align: left;
    padding: 0;
    width: 100%;
  }

  
  .dot {
    margin-bottom: 0 !important;
    margin-right: 20px;
    flex-shrink: 0; 
    z-index: 2;
  }

  
  .label {
    padding-top: 4px;
    font-size: 14px;
  }


  @keyframes fadeInLeft {
    from {
      opacity: 0;
      transform: translateX(-20px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  .control-block.active .timeline-item {
    animation-name: fadeInLeft;
  }
   


.adv_select_outer {
    background-color: #e7ede38d;    
    padding-top:0px;
    position: relative;
    z-index:7;
    overflow: visible;
    width:100%;
    height:auto;    
    border-top-left-radius:20px;
    border-top-right-radius:20px;
    margin-left:0;
    margin-bottom: -60px;
    transform: translateY(-60px);
}

.adv_select 
{width:98%;
 height:auto; 
margin-left:0;
border-radius: 20px;
position: relative;
z-index:55 !important;
background: #FFFFFF;
border: 3px solid #93C477;
border-bottom:40px !important;}    


	
	
}