#swiper-multiple-slides-project ,#swiper-multiple-slides-project-field-1,
#swiper-multiple-slides-project-field-2,#swiper-multiple-slides-project-field-3,
#swiper-multiple-slides-project-field-4,.swiper-projects
{
    height:500px !important;
}
.section-title::before,
.section-title::after{
    width: 20vw !important;
}
.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:23.5rem;
        left: 14rem;
        -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:23.8rem;
        left: 17rem;
        -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;
    }

    a .activeImage:active{
        filter: none !important;
        transition: all 0.2s ease-in-out;
        top:-1.2rem;
        /* box-shadow: 0 5px 5px rgba(12, 138, 195, 0.5270483193277311), 0 5px 5px rgba(252, 159, 92, 0.636) !important ; */
    }
    .card-slide p{
    padding: 0px ;margin: 0px;
}
@media(max-width:768){
    .border-start {
        border-left: 0  !important;
        border-right: 0  !important;
    }
    .border-start-0 {
        border-left: 0  !important;
        border-right: 0  !important;
    }
}
/* @media(min-width:768){
#tooltip h5 , #tooltip h4 , #tooltip .card-title , #tooltip .card{
    font-size:5px !important;
}
} */