.card-div{
    z-index: 1200;
}
.card-div::after,
.card-div::before {
        border: 0;
        content: "";
        position: absolute;
        width: 35px;
        height: 35px;
        transition: all 0.5s cubic-bezier(0.68, 0.55, 0.265, -1.55);
        display: none;
        opacity: 70%;
    }
.card-div .s1,
.card-div .s2 {
        border: 0;
        content: "";
        position: absolute;
        width: 20px;
        height: 20px;
        transition: all 0.5s cubic-bezier(0.68, 0.55, 0.265, -1.55);
        display: none;
        opacity: 70%;
    }
    .card-div:hover::after,
    .card-div:hover::before,
    .card-div:hover .s1,
    .card-div:hover .s2 {
        display: block;
    }

    .card-div::before {
        border: 0;
        background-color: var(--main-color);
        top: -1.20rem;
        left: 3rem;
        -webkit-animation: topAnimation 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.25s infinite alternate;
        animation: topAnimation 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.25s infinite alternate;
        box-shadow: 0 19px 38px rgba(5, 63, 89, 1), 0 15px 12px rgba(12, 138, 195, 0.5270483193277311) !important;

    }
    .card-div .s2 {
        border: 0;
        background-color: var(--main-color);
        top: -0.8rem;
        left: 6.2rem;
        -webkit-animation: topAnimation 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.25s infinite alternate;
        animation: topAnimation 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.25s infinite alternate;
        box-shadow: 0 19px 38px rgba(5, 63, 89, 1), 0 15px 12px rgba(12, 138, 195, 0.5270483193277311) !important;
    }

    .card-div::after {
        background-color: var(--secondary-color);
        top:20rem;
        left: 16rem;
        -webkit-animation: bottomAnimation 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.5s infinite alternate;
        animation: bottomAnimation 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.5s infinite alternate;
        box-shadow: 0 19px 38px rgba(79, 45, 21, 0.779), 0 15px 12px rgba(252, 159, 92, 0.636) !important;
    }
    .card-div .s1{
        background-color: var(--secondary-color);
        top:20.5rem;
        left: 19rem;
        -webkit-animation: bottomAnimation 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.5s infinite alternate;
        animation: bottomAnimation 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.5s infinite alternate;
        box-shadow: 0 19px 38px rgba(79, 45, 21, 0.779), 0 15px 12px rgba(252, 159, 92, 0.636) !important;
    }

    .card-div:hover,
    .card-div:hover  {
        color: white;
        border: 0;
        display: block;
        background-color: rgba(6, 70, 100, 0.527)!important;
        transform: skewY(0deg);
        transition: all 0.2s ease-in-out;
        top:-1.2rem;
        transform: scale(1.0090, 1.0090);
        box-shadow:  0 19px 38px rgba(5, 63, 89, 1), 0 15px 12px rgba(12, 138, 195, 0.5270483193277311) !important ;

    }

    .card-div:hover::before,
    .card-div:hover::after,
    .card-div:hover .s1,
    .card-div:hover .s2 {
        display: block;
    }

    .card-div:hover::after,
    .card-div:hover .s1  {
        display: block;
    }

    .card-div:hover::before ,
    .card-div:hover .s2 {
        display: block;
    }

/* filtter yeras  */
#swiper-multiple-slides-year
{
    height:220 !important;
}
 .swiper-container .swiper-slide{
    /* background-color: white !important; */
}
.year-div {
    background-image:url('/Front/Img/Projects/projects-filter.png') !important ;    background-size: cover;
    filter: grayscale(100%);
    border-radius: 5px;
    text-align: center;
    position: relative;
    /* width: 205px;
    height: 180px; */
    width: 180px;
    height: 150px;
    cursor: pointer;
    color: white !important;
}
.year-div:hover{
    /* display: block; */
    filter: grayscale(0%);
}
/* year-div active style start */
.year-div.active
{
    filter: grayscale(0%);
}
.year-div::after,
.year-div::before {
        border: 0;
        content: "";
        position: absolute;
        width: 10px;
        height: 10px;
        display: none;
    }
    .year-div:hover::after,
    .year-div:hover::before{
        display: block;
    }
    .year-div::before {
        border: 0;
        background-color: var(--main-color);
        top: -0.30rem;
        left: -1.3rem;
        box-shadow: 0 19px 38px rgba(5, 63, 89, 1), 0 15px 12px rgba(12, 138, 195, 0.5270483193277311) !important;

    }
    .year-div::after {
        background-color: var(--secondary-color);
        top: 8.8rem;
        left: 8.5rem;
        box-shadow: 0 19px 38px rgba(79, 45, 21, 0.779), 0 15px 12px rgba(252, 159, 92, 0.636) !important;
    }
.year-div::after,
.year-div::before {
        border: 0;
        content: "";
        position: absolute;
        width: 10px;
        height: 10px;
        opacity: 70%;
        background-color: #818078 !important;
        /* display: none; */

    }
    .year-div:hover::after
     {
        background-color: var(--secondary-color) !important;
        display: block;
        box-shadow: 0 15px 12px rgba(252, 159, 92, 0.636) !important;
    }
    .year-div:hover::before
     {
        background-color: var(--main-color) !important;
        display: block;
        box-shadow: 0 15px 12px rgba(12, 138, 195, 0.5270483193277311) !important;
    }
/* active start*/
.year-div.active::after,
.year-div.active::before {
        border: 0;
        content: "";
        position: absolute;
        width: 10px;
        height: 10px;
        display: block !important;
        opacity: 100%;
    }
    .year-div.active::after{
        border: 0;
        background-color: var(--secondary-color) !important;
        box-shadow: 0 15px 12px rgba(252, 159, 92, 0.636) !important;
    }
    .year-div.active::before{
        border: 0;
        background-color: var(--main-color) !important;
        box-shadow: 0 15px 12px rgba(12, 138, 195, 0.5270483193277311) !important;
    }
/* year-div active style end */
/* active pagination start */

/* active pagination end */
/* .boundary-year {
    border-bottom: 2.5px solid var(--main-color);
    padding: 0;
    margin-top: -124.5px;
    position: static;
    opacity: 1;
    color: var(--main-color);
} */
.hr-boundary-year{
  position: relative;
  border: 0;
  height: 2px !important;
}
.hr-boundary-year:before{
  content: '';
  position: absolute;
  background:var(--dark);
  left: 0;
  top: 8.0rem;
  width: 100%;
  height: 2px;

}
/* .hr-boundary-year:after{
  content: attr(data-content);
  position: relative;
  display: inline-block;
  color: black;
  padding: 0 2em;
  line-height: 1.5em;
  color: #818078;
  background-color: #fcfcfa;
} */
@media (max-width: 999px) {
.hr-boundary-year:before{
  display: none;
}
.boundary-year {
   display: none;
}
.hr-boundary-year .cubee:first-child {
    display: none;
  }

  .hr-boundary-year .cubee:last-child ,.cubee2 {
    display: none;
  }
.year-div{
    justify-content: inherit;
    display: block;
    display: inline-grid;
    /* width: 130px;
    height: 130px; */
}
#swiper-multiple-slides-year {
    height: 250px !important;
}
}
@media(min-width:768){
    .grid-item {
        padding: 1.5rem !important;
    }
}
.card-slide p{
    padding: 0px ;margin: 0px;
}
/* new  */
.title-year{
    line-height: 0.4 !important;
    text-align:  center !important;
}

/*  */

.hr-boundary-year .cubee {
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--dark);
    top: 7.7rem;
    transform: rotate(45deg);
  }

  .hr-boundary-year .cubee:first-child {
    left: 1;
  }

  .hr-boundary-year .cubee:last-child ,.cubee2 {
    right: 1;
  }