/*------------------------------
    transport-service Page
------------------------------*/
.transport-service-area {
  padding: 150px 0px 150px;
  background: var(--secondary-color); }

.transport-service-single {
  margin-bottom: 70px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }
  .transport-service-single:hover .transport-service-content:before {
    background: var(--active-color); }
  .transport-service-single:hover .boxed-btn {
    background-color: var(--active-color);
    color: var(--secondary-color);
    border: 1px solid var(--active-color); }
  .transport-service-single .transport-service-content {
    margin: auto;
    padding-left: 25px; }
    .transport-service-single .transport-service-content:before {
      content: "";
      position: absolute;
      height: 245px;
      z-index: 9;
      width: 5px;
      top: 24%;
      left: 0px;
      background: var(--button-color);
      display: block; }
    .transport-service-single .transport-service-content h3 {
      margin-bottom: 20px; }
    .transport-service-single .transport-service-content p {
      margin-bottom: 30px; }
    .transport-service-single .transport-service-content span {
      font-weight: 600;
      color: var(--heading-color); }

.transport-service-image {
  position: relative;
  display: inline-block; }
  .transport-service-image .transport-service-item-hover {
    position: absolute;
    top: 0;
    left: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden; }
    .transport-service-image .transport-service-item-hover a {
      display: block;
      width: 100%;
      height: 100%; }
    .transport-service-image .transport-service-item-hover .transport-service-link {
      position: absolute;
      left: 0;
      right: 0;
      text-align: center;
      top: calc(50% - 15px);
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
      -webkit-transition: all .5s ease;
      -o-transition: all .5s ease;
      transition: all .5s ease;
      opacity: 0;
      z-index: 9;
      width: 30px;
      height: 30px;
      left: calc(50% - 0px);
      -webkit-transition-delay: 0.3s;
      -o-transition-delay: 0.3s;
      transition-delay: 0.3s; }
      .transport-service-image .transport-service-item-hover .transport-service-link span {
        color: #fff;
        width: 100%;
        height: 100%;
        line-height: 50px;
        display: block;
        font-size: 18px; }
        .transport-service-image .transport-service-item-hover .transport-service-link span::before {
          font-size: 30px; }
    .transport-service-image .transport-service-item-hover:before {
      position: absolute;
      left: -50%;
      top: -50%;
      width: 100%;
      height: 100%;
      content: '';
      background-color: rgba(0, 0, 0, 0.2);
      z-index: 1;
      opacity: 0;
      -webkit-transition: all .5s ease;
      -o-transition: all .5s ease;
      transition: all .5s ease; }
    .transport-service-image .transport-service-item-hover:after {
      position: absolute;
      right: -50%;
      bottom: -50%;
      width: 100%;
      height: 100%;
      content: '';
      background-color: rgba(0, 0, 0, 0.2);
      z-index: 1;
      opacity: 0;
      -webkit-transition: all .5s ease;
      -o-transition: all .5s ease;
      transition: all .5s ease; }
  .transport-service-image:hover .transport-service-item-hover:before {
    opacity: 1;
    left: 0;
    top: 0; }
  .transport-service-image:hover .transport-service-item-hover:after {
    opacity: 1;
    right: 0;
    bottom: 0; }
  .transport-service-image:hover .transport-service-link {
    opacity: 1;
    left: calc(50% - 15px); }