
.tabiatContainer{
    max-width: 1990px;
    margin: auto;
}

.header_wrp{
    display: none;
}

a{
    color: inherit;
    text-decoration: none;
}

a:hover{
    color: inherit;
    text-decoration: none;
}

.tabiat-link {
    color: red;
    text-shadow: 1px 1px 0 #000;
    animation: changeColor 1s infinite;
}

@keyframes changeColor {F
  from {color: red;}
  to {color: #000;}
}


/* first row */


/* slider */

  .swiper {
    width: 100%;
    height: 100%;
  }

  .moharram .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }

  .moharram .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  @-webkit-keyframes heartbeat {
    from {
      -webkit-transform: scale(1);
              transform: scale(1);
      -webkit-transform-origin: center center;
              transform-origin: center center;
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    10% {
      -webkit-transform: scale(0.91);
              transform: scale(0.91);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    17% {
      -webkit-transform: scale(0.98);
              transform: scale(0.98);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    33% {
      -webkit-transform: scale(0.87);
              transform: scale(0.87);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    45% {
      -webkit-transform: scale(1);
              transform: scale(1);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
  }
  @keyframes heartbeat {
    from {
      -webkit-transform: scale(1);
              transform: scale(1);
      -webkit-transform-origin: center center;
              transform-origin: center center;
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    10% {
      -webkit-transform: scale(0.91);
              transform: scale(0.91);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    17% {
      -webkit-transform: scale(0.98);
              transform: scale(0.98);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    33% {
      -webkit-transform: scale(0.87);
              transform: scale(0.87);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    45% {
      -webkit-transform: scale(1);
              transform: scale(1);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
  }

  .heartbeat{
    position: absolute;
    right: 8%;
    top: 12%;
    -webkit-animation: heartbeat 1.5s ease-in-out infinite both;
    animation: heartbeat 1.5s ease-in-out infinite both;
  }
  
  .heartbeat-text {
    color: #fff;
    font-family: Regular;
    position: absolute;
    bottom: 10%;
    right: calc(50% - 38%);
    font-size: 22px;
    max-width: 20%;
  }

  .moharram .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after{
    color: white;
    background: #0000004f;
    padding: 10px;
    border-radius: 10px;
}

  /*.moharram .swiper-button-prev:after{*/
  /*    matgin-right:*/
  /*}*/

.moharram .swiper-pagination-bullet{
    background: white !important;
    width: 10px !important;
    height: 10px !important;
}

.moharram .swiper-button-next{
    position: absolute;
    left: 3%;
}

.moharram .swiper-button-prev{
    position: absolute;
    right: 3%;
}

  /* slider */

/* first row */


/* second row */
.secondRow{
    width: 100%;
    padding: 50px 0;
    background: #000000;
}

.secondRow-top{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.wrapperVideo,
.wrapperTxt{
    width: 50%;
    /*height: 400px;*/
    /* border: 1px solid red; */
    display: flex;
    align-items: center;
    justify-content: center;
}

.video,
.text{
    width: 80%;
    /*height: 300px;*/
    /* background: #e5e5e5; */
}

.video> video{
    border-radius: 10px;
}

.secondRow-bottom{
    margin-top: 20px;
}

.Order,
.theProduct{
    width: 80%;
    margin: auto;
    border-radius: 40px;
    /*background: #e5e5e5;*/
}

.Order{
   background: #195402;
   padding: 10px; 
}

.responseTime{
    width: 80%;
    padding: 10px;
    margin: auto;
    margin-top: 50px;
    border-radius: 40px;
    background: #F7DE07;
}

.kindness{
    width: 80%;
    margin: auto;
}

.contentKindness{
    color: white;
    font-family: Regular;
    font-size: 1.2em;
    margin-top: 10px;
}

.contentOrder{
    font-family: Regular;
    color: white;
    font-size: 2em;
    text-align: center;
}

.contentOrder span{
    color: red;
    font-size: 1.5em;
    text-shadow: 1px 1px 0 white;
}

.contentTime{
    font-family: Regular;
    color: black;
    font-size: 2em;
    text-align: center;
}

.contentTime span{
    color: red;
    text-shadow: 1px 1px 0 black;
}
/* second row */

/* third row */

.logoAliland{
    width: 18%;
    display: flex;
    justify-content: center;   
    margin-top: 20px;
}

.thirdRow{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    overflow: hidden;
}

.wrapperPack{
    width: 85%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}

.Pack{
    width: 450px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background: #e5e5e5;
    border-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    margin-top: 15px;
}

.wrapperpack{
    width: 100%;
}

.top-pack1{
    background: #539A23;
}

.top-pack2{
    background: #FF5500;
}

.top-pack3{
    background: #4D0072;
}

.top-pack{
    width: 100%;
    height: 70%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px 20px 0 0;
    padding: 20px;
}

.imgPack{
    width: 80%;
}

.bootom-pack{
    width: 100%;
    height: 30%;
    padding: 20px;
    /* border: 1px solid black; */
}

.originalPrice,
.discountPrice{
    font-size: 20px;
    text-align: center;
    margin-top: 20px;
    font-family: Medium;
}

.discountPrice span{
    color: red;
}

.originalPrice{
    position: relative;
}

.originalPrice::before{
    content: '';
    width: 150px;
    height: 2px;
    background: red;
    position: absolute;
    top: 14px;
    right: 130px;
}

.theProduct{
    margin-top: 50px;
}

.wrapperLinkList{
    width: 100%;
}

.wrapperLinkList{
    display: block;
    width: 80%;
    background: #195402;
    margin: auto;
    margin-top: 50px;
    border-radius: 40px;
    display: flex;
    justify-content: center;
    padding: 100px 20px;
}

.titlePack{
    font-family: Fat;
    text-align: center;
    font-size: 1.5em;
}

.wrapperContentThird{
    width: fit-content;
}

.contectList{
    width: 100%;
    font-family: Regular;
    font-size: 2em;
    color: white;
    text-align: center;
}

.contectList span{
    color: #F7DE07;
}

.linkList{
    display: block;
    background: #F7DE07;
    width: 405px;
    padding: 20px 0;
    text-align: center;
    color: #000000;
    font-family: Regular;
    text-decoration: none;
    border-radius: 100px;
    font-size: 1.5em;
    margin-right: calc(50% - 202px);
    margin-top: 20px;
    font-weight: bold;
}
/* third row */

/* fourth row */
.fourthRow{
    width: 100%;
    /* border: 1px solid black; */
}
.participation{
    width: 100%;
    background-image: url(/moharam/wp-content/uploads/2022/07/background.png);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 100px 0;
    margin: 50px 0;
}

.wrapperContentFourth{
    width: 80%;
    margin: auto;
}

.titleFourth{
    color: white;
    font-family: Regular;
    font-size: 2.5em;
}

.contentFourth{
    color: white;
    font-family: Regular;
    font-size: 1.2em;
    margin-top: 20px;
}
/* fourth row */

/* fifth row */
.fifthRow{
    width: 100%;
    /* border: 1px solid black; */
}

.levels{
    width: 80%;
    background: #195402;
    margin: auto;
    margin-top: 50px;
    counter-reset: item;
    border-radius: 40px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 50px 0;
}

.titleFifth{
    font-family: Regular;
    font-size: 2.5em;
    text-align: center;
    color: white;
}

.levelsItem{
    color: white;
    font-family: Regular;
    font-size: 1.2em;
    width: 80%;
    margin-top: 20px;
    display: flex;
    align-items: center;
    position: relative;
    margin-right: 50px;
}

.circle{
    content: '';
    width: 40px;
    height: 40px;
    background: #F7DE07;
    border-radius: 50%;
    color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: -60px;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

/* fifth row */

/* sixth row */
.sixthRow{
    width: 100%;
    /* border: 1px solid black; */
}

.Notes{
    width: 80%;
    margin: auto;
    margin-top: 50px;
    background: #195402;
    border-radius: 40px;
    padding: 50px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.titleSixth{
    width: 100%;
    font-family: Regular;
    font-size: 2.5em;
    text-align: center;
    color: white;
}

.ulNotes{
    width: 80%;
}

.liNotes{
    font-family: Regular;
    font-size: 1.2em;
    color: white;
    margin-top: 20px;
    list-style-type: none;
    position: relative;
}

.liNotes::before{
    content: '';
    width: 10px;
    height: 10px;
    background: #F7DE07;
    position: absolute;
    border-radius: 50%;
    right: -20px;
    top: 10px;
}

/* sixth row */

/* seventh row */
.seventhRow{
    width: 100%;
    /* border: 1px solid black; */
}

.titleQuestions{
    text-align: center;
    font-family: Regular;
    margin-top: 50px;
    font-size: 2.5em;
}

.wrapperFaq{
    width: 80%;
    margin: auto;
    margin-top: 50px;
}

/* faq */
.wrapslid{
    width: 100%;
    text-align: center;
    font-size: 1.5em;
}

.slide-item{
    width: 100%;
    cursor: pointer;
    padding: 1em;
    background: #F7DE07;
    margin-top: 1em;
    border-radius: 10px;
    box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.11);
}

.slide-title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: Regular;
    font-size: .8em;
    text-align: right;
}


.rotate{
    transform: rotate(45deg);
}

.slide-content{
    display: none;
    padding: 1em;
    text-align: justify;
    font-family: Regular;
    font-size: .8em;
}

.slideIcon{
    transition: 0.3s;
}
/* faq */

/* seventh row */

/* footer row */
.footerRow{
    width: 100%;
    /* border: 1px solid black; */
    display: flex;
    justify-content: center;
    /* background: #000000; */
    padding: 50px 0;
    margin-top: 50px;
    background-image: url(/moharam/wp-content/uploads/2022/07/footer.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.wrapperFooter{
    width: 70%;
    display: flex;
    flex-wrap: wrap;
    margin-top: 100px;
    padding-bottom: 20px;
    overflow: hidden;
}

.wrapperFooter>div{
    width: 33.33333%;
}

.wrapperSocials{
    display: flex;
    justify-content: center;
    align-items: center;
}

.social{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
}

.social>img{
    width: 40%;
}

.wrapperTell{
    display: flex;
    align-items: center;
    justify-content: end;
}

.tell{
    color: white;
    font-family: Regular;
    font-size: 2em;
}

.wrapperLogo img {
    max-width: 50%;
}
/* footer row */

@media (max-width: 1536px){
    .Pack{
        width: 400px;
    }
    .heartbeat-text{
        bottom: 10%;
    }
}
@media (max-width: 1440px){

.heartbeat-text {
    bottom: 20%;
    right: calc(50% - 42%);
    max-width: 30%;
}
    
    .heartbeat{
        width: 350px;
        right: 8%;
    }
    .Pack{
        width: 280px;
    }
    
        .originalPrice::before{
        right: 70px;
    }
}
@media (max-width: 1280px){
    .contentOrder,
    .contentTime,
    .contectList{
        font-size: 2em;
    }
    
.heartbeat-text {
    bottom: 10%;
        font-size: 16px;
}

}
@media (max-width: 1024px){
    .heartbeat{
        width: 300px;
        right: 8%;
    }
    .wrapperVideo, .wrapperTxt{
        width: 100%;
    }

    .Notes,.wrapperFaq,.levels{
        width: 95%;
    }
    .titleFourth{
        font-size: 2em;
    }
    .wrapperPack{
        width: 95%;
    }
    .wrapperFooter>div{
        width: 100%;
    }
    .wrapperLogo,
    .wrapperTell{
        display: flex;
        justify-content: center;
        margin-top: 20px;
    }
    .wrapperSocials{
        margin-top: 20px;
    }

    .wrapperLinkList{
        padding: 50px 20px;
    }

    .Notes, .levels{
        padding: 50px 0;
    }
    
        .originalPrice::before{
        right: 40px;
    }
    
    .heartbeat-text {
    bottom: 3%;
    font-size: 14px;
    max-width: 35%;
}

.logoAliland {
    width: 20%;
}

}
@media (max-width: 768px){
    .heartbeat{
        width: 250px;
        right: 8%;
    }
    .Order,
    .responseTime,
    .wrapperLinkList{
        width: 95%;
    }
    .contentOrder,
    .contentTime,
    .contectList{
        font-size: 1.5em;
    }

    .Pack{
        width: 270px;
    }
    .titleFifth,
    .titleSixth{
        font-size: 2em;
        margin-bottom: 20px;
    }
    .contentOrder, .contentTime, .contectList
    .titleQuestions{
        font-size: 1.2em;
    }
    
    .contentKindness,
    .linkList,
    .contectList,
    .contentFourth,
    .levelsItem,
    .liNotes{
        font-size:1em;
    }
    
    .responseTime{
        margin-top:20px;
    }
    

}
@media (max-width: 640px){

.heartbeat-text {
    bottom: 20%;
    font-size: 14px;
    max-width: 30%;
}

    .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after{
        font-size: 20px !important;
    }
    .heartbeat{
        width: 200px;
        right: 8%;
    }
    .Pack{
        width: 450px;
    }
    .linkList{
        width: 260px;
        margin-right: calc(50% - 130px);
    }
    .swiper{
        height: 50vh;
    }
    .slide-title,
    .slide-content{
        font-size: .7em;
    }
    .originalPrice::before{
        right: 130px;
    }
    
    .logoAliland{
        width: 35%;
    }
    

}

@media (max-width: 500px){
    .heartbeat{
        width: 150px;
        right: 5%;
    }
    .circle{
        right: -50px;
    }
    
    .heartbeat-text {
    bottom: 30%;
    font-size: 14px;
    max-width: 33%;

}