/* انیمیشن تغییر رنگ پس‌زمینه */
@keyframes backgroundColorChange {
  0% { background-color: #f3d2c5; }  /* رنگ اول */
  33% { background-color: #f2e3b7; } /* رنگ دوم */
  67% { background-color: #c5f6dc; } /* رنگ سوم */
  100% { background-color: #ace8e0; } /* رنگ چهارم */
}

/* انیمیشن موج سینوسی */
@keyframes wave {
    0% {
      clip-path: polygon(0% 15%, 100% 15%, 100% 100%, 0% 100%);
    }
    50% {
      clip-path: polygon(0% 10%, 100% 0%, 100% 100%, 0% 100%);
    }
    100% {
      clip-path: polygon(0% 15%, 100% 15%, 100% 100%, 0% 100%);
    }
  }

/* استایل باکس و اعمال انیمیشن‌ها */
.box_source {
  position: relative;
  overflow: hidden;
  padding-top: 100px;
  padding-bottom: 30px;
  margin: 20px 0;
  animation: backgroundColorChange 5s infinite, wave 4s infinite ease-in-out;
}
.barcod_box{

   
 
    margin: 0 auto!important;
    width: 80%!important;
  
   
   
}
.barcod_box img{
    width: 250px;
    height: 380px;
    border-radius: 0.5rem;
    /* animation: backgroundColorChange 5s infinite */
  
    
    
}
.phone_box{
    
    display: flex;
    justify-content: end;
}
.barcod_box img:hover{
   opacity: 60%;
}
.barcod_box h6{
    font-size: 1.1rem;
    color: #000;
    line-height: 1.6;
}
.info_chanel{
    display: flex;
    align-items: center;
    justify-content: center;
 
}
.info_chanel h4{
    font-size: 1.4rem;
    margin-bottom: 1rem;
    color: #000;
}
.box_join{
    display: flex;
    justify-content:end;
}
.info_chanel img{
    width: 150px;
    height: 150px;
    border:4px solid var(--titel-color2)
    
}
.barcod_box button{
    background-color: #fc8312;;
    color: #eee;
    font-size: 1.1rem;
    width: 20%;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.167);  /* سایه با شدت بیشتر */
    padding: 0.5rem;
    border-radius: 0.5rem;
    transition:  all  0.5ms;
}
.barcod_box button:hover{
    opacity: 60%;
}
.info_chanel{
 
  padding: 2rem;
  

}

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

    .barcod_box{
        width: 90%;
    }


 
}



@media only screen and (max-width: 1300px) {
    .phone_box{
        
        display: flex;
        justify-content: center;
    }
    .barcod_box button{
     
        font-size: 1rem;
        width: 30%;
      
    }

    .barcod_box{
        width: 100%;
      
    }


    .barcod_box h6{
        font-size: 1rem;
        color: #000;
        padding: 0.5rem;
    }
}

@media only screen and (max-width: 992px) {
.box_source{
    padding-top: 130px;
}    
.phone_box{
   
    display: flex;
    justify-content: center;
}
.info_chanel{
    display: flex;
    justify-content: center;;
}
.chanel h4{
  display: flex;
  font-size: 1.2;
justify-content: center;
}
.chanel h6{
    display: flex;
    justify-content: center;
}
.chanel a {
    display: flex;
    text-decoration: none;
    justify-content: center; 
}
}

@media only screen and (max-width: 600px) {
    .barcod_box img{
        width: 220px;
        height: 330px;
        border-radius: 0.5rem;
        animation: backgroundColorChange 5s infinite
      
        
        
    }
    .box_source{
        padding-top: 130px;
    }    
    .phone_box{
       
        display: flex;
        justify-content: center;
    }
    .info_chanel{
        display: flex;
        justify-content: center;;
    }
    .chanel h4{
      display: flex;
      font-size: 1.2;
    justify-content: center;
    }
    .chanel h6{
        font-size: 0.95rem;
        display: flex;
        justify-content: center;
    }
    .chanel a {
        display: flex;
        text-decoration: none;
        justify-content: center; 
    }
    .chanel button{
        font-size: 0.95rem;
        width: 38%;
    }
    }


    @media only screen and (max-width: 520px) {
        .chanel button{
            font-size: 0.95rem;
            width: 100%;
        }

        .chanel h4{
            display: flex;
            font-size: 1!important;
          justify-content: center;
          }
          .chanel h6{
              font-size: 0.9rem;
              display: flex;
              justify-content: center;
          }
    }