@import url('https://fonts.googleapis.com/css2?family=Comic+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Comic+Neue&display=swap');


body{
    font-family: sans-serif;
}

.navbar {
    background-color:white !important;
}




.modal-backdrop.show {
    opacity: -0.5;
    z-index: auto;
}

.col-lg-4 span{
 font-size: 80px;

}

.col-lg-4 span i{
    color: green;
    margin-top: 205px;
    margin-left: 20px;
}


/*--------------------------------- home-------------------------------------- */


.headeeer{
    text-align:center;
    margin-top:30px;
    border-radius:1px solid;
    font-size: 1.7rem !important;
}


h1.headeeer:after {
    content: '';
    border-bottom: 3px solid #21AB60;
    height: 20px;
    display: block;
    width: 30%;
    margin: 0 auto;
}

.row.row-cols-2{
    margin-left:15%;
    width: 75%;
}


.card-body h{
    text-align: center;
}




 .rating {
    unicode-bidi: bidi-override;
    direction: rtl;
    text-align: left;
  }
  .rating > span {
    display: inline-block;
    position: relative;
    width: 1.1em;
  }
  .rating > span:hover,
  .rating > span:hover ~ span {
    color: transparent;
  }
  .rating > span:hover:before,
  .rating > span:hover ~ span:before {
     content: "\2605";
     position: absolute;
     left: 0;
     color: gold;
  }



/* ---------------------------Blogs -------------------------------------*/



.col-md-8{
    padding-top: 5px;
}


.headeeeer{
    text-align:left;
    margin-top:30px;
    border-radius:1px solid;
}
h1.headeeeer:after {
    content: '';
    border-bottom: 3px solid #21AB60;
    height: 20px;
    display: block;
    width: 22%;

}

.modal.right .modal-dialog {
    position: fixed;
    margin: auto;
    height: 100%;
    right: 0;
    -webkit-transform: translate3d(0%, 0, 0);
        -ms-transform: translate3d(0%, 0, 0);
         -o-transform: translate3d(0%, 0, 0);
            transform: translate3d(0%, 0, 0);
  }


  .modal-dialog {
    max-width: 950px;}


  .modal.right .modal-content {
    height: 100%;
    overflow-y: auto;
  }

  .modal.right .modal-body {
    padding: 15px 15px 80px;
  }

  /*Right*/
  .modal.right.fade .modal-dialog {
    right: -500px;
    -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
       -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
         -o-transition: opacity 0.3s linear, right 0.3s ease-out;
            transition: opacity 0.3s linear, right 0.3s ease-out;
  }
  .modal.right.fade.show .modal-dialog {
    right: 0;
  }


  /** ----- MODAL STYLE ----- */
      .modal-content {
          border-radius: 0;
          border: none;
      }

      .modal-header {
          border-bottom-color: #EEEEEE;
          background-color: #FAFAFA;
      }








/* -------------------------------------------login---------------------------- */


.card.vat{
    width: 47%;
    margin-left: 30%;
    border-radius: 1.25rem;
}

.btn:not(:disabled):not(.disabled).jj {
    width: 100%;

}


/* ---------------------------------------------signup-------------------------------- */


.card.fen{
    width:52%;
    height:50%;
    margin-left:26%;
    border-radius: 1.25rem;
    padding: 9px 9px;
}
@media only screen and (max-device-width: 480px){
    .card.vat{
        width: 100%;
        margin-left: 0;
        border-radius: 1.25rem;
    }
    .card.fen{
        width:100%;
        height:50%;
        margin-left:0;
        border-radius: 1.25rem;
        padding: 9px 9px;
    }

}

/* ------------------------------------Profile-------------------------------------- */

.vv{
    outline: 0;
     box-shadow:0 0 0 0 !important;
}

.line{
    border-left: 1px solid rgb(230, 230, 230);
    height: 336px;
    position: absolute;
    left: 28%;
    margin-left: -3px;
    top: 8px;
}

.btn:not(:disabled):not(.disabled).bk {
    width:25%;
}

.btkk{
    width:15% ;
 padding-top: 12%;
}

/*----------------------------------------footer--------------------------------------------*/


.card-footer img{
    width: 12%;
}
.card-footer a{
    word-spacing: 30px;
}



/*-------------------signup2---------------------------*/


.card.fen h4{
    text-align: center;
}


/* ----------------------payment-------------------------------- */

.line.c{
    height: 100%;
}

.tabs {
    margin: 2px 5px 0px 5px;
    padding-bottom: 10px;
    cursor: pointer
}

.tabs:hover,
.tabs.active {
    border-bottom: 1px solid #2196F3
}

fieldset {
    display: none
}

fieldset.show {
    display: block
}
.modal-body.accordion{

    margin-left: 3%;
}

/* ------------------------------------index-------- */
.bb{
    overflow: hidden;
}
.banner1,.banner2,.banner3{
   height: 500px;
   width: 700px;
   position: absolute;
}
  .banner1 img{
    width: 100%;
    height: 100%;
    position: relative;
    animation: zoom-in-zoom-out 8s ease infinite;
}
.banner2 img{
    width: 100%;
    height: 100%;
    position: relative;
    animation: zoom-in-zoom-out 8s ease infinite;
}
.banner3 img{
    width: 100%;
    height: 100%;
    position: relative;
    animation: zoom-in-zoom-out 8s ease infinite;
}






@keyframes zoom-in-zoom-out {
    0% {
      transform: scale(1, 1);
    }
    50% {
      transform: scale(1.5, 1.5);
    }
    100% {
      transform: scale(1, 1);
    }
  }


.text-box{
    width: 83%;
    position: absolute;
    top:25%;
    left: 8%;
    animation: textup 12s linear infinite;
    transform: translateY(100px);


}

.text-box h1{
    margin-bottom:5%;
}

.text-box p{
    font-size: 100%;
    line-height: 18px;
    margin-top: 5%;
}

.banner1{
    animation: slide1 12s linear infinite;
}

.banner2{
    animation: slide2 12s linear infinite;
}

.banner3{
    animation: slide3 12s linear infinite;
}


@keyframes slide1{
    0%{
        visibility: visible;
    }

    25%{
        visibility: hidden;
    }

    50%{
        visibility: hidden;
    }

    75%{
        visibility: hidden;
    }

    100%{
        visibility: visible;
    }
}



@keyframes slide2{
    0%{
        visibility:hidden;
    }

    25%{
        visibility: hidden;
    }

    50%{
        visibility: visible;
    }

    75%{
        visibility: hidden;
    }

    100%{
        visibility: hidden;
    }
}


@keyframes slide3{
    0%{
        visibility:hidden;
    }

    25%{
        visibility: hidden;
    }

    50%{
        visibility: hidden;
    }

    75%{
        visibility: visible;
    }

    100%{
        visibility: hidden;
    }
}



@keyframes textup{
    10%{
        transform: translateY(0px);
    }
    100%{
        transform: translateY(0px);
    }
}

.text-box1{
    animation-delay: 0s;
}

.text-box2{
    animation-delay: 3s;
}
.text-box3{
    animation-delay: 6s;
}

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

.slider_sad img{
    height:600px;
    width:100%
}
@media only screen and (max-width: 600px) {
    .slider_sad .slider_yamshl{
        background:red;
        margin-bottom: 700px;
    }
    .slider_sad img{
        height: 36%;
    }
}


.carousel-control-prev-icon, .carousel-control-next-icon {
    outline: black;
    background-color: #008723;
    background-size: 100%, 100%;
    border-radius: 50%;
    border: 1px solid white;
    background-image: none;
}
.carousel-indicators li{
    background-color: #008723;
}