.historicDetails{
    padding: 120px 0px 70px 0px ;
}
.historicDetails .data h5{
    color: var(--main-color);
}

.historicDetails .data i{
    font-size: 10px;
    color: var(--main-color);
}
.historicDetails .data li{
   line-height: 1.6;
}
.historicDetails .image img{
   height: 360px;
}
.historicDetails .data h6{
    font-size: 18px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--second-color);
}


.historicDetails .box{
    background-color: var(--backgroundColor);
    transition: var(--main-transition);
  }
  .historicDetails   .overlay{
      background-color: rgba(181, 16, 43,60%);
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      padding: 0px 8px ;
      transition: var(--main-transition);
      transform: scale(0);
}
.historicDetails .box:hover .overlay{
        transform: scale(1);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
    }

.historicDetails .box img{
    height: 205px;
}

.card .text p{
    color: var(--second-color);
    font-size: 23px;
    font-weight: 600;
    line-height: 2;
}
.card .text p span{
    color: var(--main-color);
    cursor: pointer;
}