/* ---------------------------------------recent-projects-sec----------------------------------*/
a.btn-border.button.pdf_btn {
    margin-bottom: 50px;
}
.recent-projects-sec { 
  display: inline-block;
  width: 100%;
  overflow: hidden;
  max-width: 100%;
  padding-block: 120px 100px;
  background-color: #F5F1EB;
  border-radius: 0 0 0 70px; position: relative;
  
  & .sm-title { 
    margin-bottom: 5px;
  }
  & .recent-projects-wrapper { 
    margin-bottom: 50px;
  }
  & .heading-44 { 
    margin-bottom: 0;
  }
  & > .container {
    position: relative;
    & > .btn-theme {
      position: absolute;
      top: 0;
      right: 0;
    }
  }

  & .section_ark { 
    position: absolute;
    bottom: 50px;
    left: 46px;
    filter: invert(9%) sepia(0%) saturate(733%) hue-rotate(151deg) brightness(95%) contrast(73%);

  }
}

.recent-projects-slider { 
 width: calc(100% + 140px);
 margin-inline: -15px -125px;
  & .slide-box { 
    padding-inline: 15px;
  }

  &:not(.slick-initialized) {
    display: inline-flex;
    /* gap: 140px; */
    /* width: 100%; */
    & > .slide-box:not(:nth-child(-n + 3)) {
      display: none;
    }

    & .slide-box {
      /* flex: 1; */
    }
  }
  & .slick-list { 
    overflow: visible;
  }
  &:has(.slick-arrow) { 
    padding-bottom: 76px;
  }
  &:not(:has( > .slick-arrow)) { 
    & + .line-bar { display: none;} 
  }
  &.slick-slider .slick-prev { 
      top: 100%;
      margin-bottom: 0;
      right: 155px;
      left: unset !important;
  }
  &.slick-slider .slick-next { 
      top: 100%;
      margin-bottom: 0;
      right: 110px;
  }
}

a.recent-projects-box {
    display: inline-block;
    width: 100%;

    & .img-wrap { 
      width: 100%; margin-bottom: 25px; max-width: 100%; overflow: hidden;
      & img { 
        width: 100%;
        height: unset;
        transition: all 0.5s ease-in-out;
        -webkit-transition: all 0.5s ease-in-out;
        -ms-transition: all 0.5s ease-in-out;
      }
    }
    & .heading-24 { 
      font-weight: 600;
      display: inline-flex;
      justify-content: space-between;
      width: 100%;
      align-items: center; gap: 10px;
      & > i { 
        height: 27px;
        min-width: 27px;
        width: 27px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 100%;
        background: var(--themecolor);
        padding-left: 3px;
        & > img {
            filter: brightness(0) invert(1);
        }
      }
    }
    &:hover {  
      & > .img-wrap { & > img {
        transform: scale(1.1); 
        transition: all 0.5s ease-in-out;
        -webkit-transition: all 0.5s ease-in-out;
        -ms-transition: all 0.5s ease-in-out;
      }} 
      & .heading-24 { 
        color: var(--themecolor);
        transition: all 0.5s ease-in-out;
        -webkit-transition: all 0.5s ease-in-out;
        -ms-transition: all 0.5s ease-in-out;
      } 
    }
    & .float_img {
        max-width: 122px;
        right: 20px;
        bottom: 20px;
        padding: 14px;
    }
}

.project-details {
    display: inline-flex;
    gap: 8px;
    /* padding: 10px; */
    flex-wrap: wrap;

    & > p {
        font-size:14px; line-height:1; padding:10px; background-color:#fff; border-radius: 4px; margin-bottom:0;
        -webkit-box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.05); 
        box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.05);
        & > span {
            font-weight:600; margin-right:3px;
        }

        &.dark {
            background:#323232;
            color:#fff;
            & span {
                color:#fff;
            }
            -webkit-box-shadow: none; 
            box-shadow: none;
        }
    }
}

.line-bar {
    width: calc(100% - 90px);
    border-bottom: 1px solid rgb(0 0 0 / 10%);
}
/* ---------------------------------------recent-projects-sec----------------------------------*/

/* ---------------------------------------projects-listing-secc----------------------------------*/
.projects-listing-sec { 
  display: inline-block;
  width: 100%;

  & .btn-theme { 
    margin-top: -30px;
  }
}

.projects-listing { 
  display: inline-flex;
  width: calc(100% + 36px);
  margin-inline: -18px;
  flex-wrap: wrap; row-gap: 50px;
  padding-bottom: 80px;
  position: relative;
  &::after {
    content: ''; 
    position: absolute;
    height: 0; width: calc(100% - 220px);
    bottom: 0;
    right: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }
  & .slide-box { 
    width: 33.33%;
    padding-inline: 18px;
  }

  & .project-details {
    & > p {
      background: #F5F1EB;
      &.dark { 
        background: #323232;
        color: #fff;
      }
    }
  }

  & .float_img { 
    max-width: 122px;
    right: 20px; bottom: 20px;
    padding: 14px;
  }
}


/* ---------------------------------------projects-listing-secc----------------------------------*/

@media (max-width: 1800px) {
  
}

@media (max-width: 1599.98px) { 
  .line-bar {
    width: calc(100% - 180px);
    left: 85px;
    position: relative;
  }
  .recent-projects-sec { 
    padding-block: 80px 80px;
  }
}
@media (max-width: 1439.98px) {
  .recent-projects-sec {
    border-radius: 0 0 0 35px;
    padding-block: 60px 80px;
    & .section_ark { 
      left: 20px;
      bottom: 24px;
      max-width: 30px;
    } 
  }
  .recent-projects-slider {
      width: calc(100% + 20px);
      margin-inline: -10px -10px;
      & .slide-box {
          padding-inline: 10px;
      }
  }
  .line-bar {
      width: calc(100% - 240px);
      left: 40px;
  }

  .projects-listing { 
    display: inline-flex;
    width: calc(100% + 20px);
    margin-inline: -10px; 
    row-gap: 25px;
    & .slide-box { 
      padding-inline: 10px;
    }
  }
}

/* Extra Large devices (large desktops, less than 1440px) */

@media (max-width: 1199.98px) {
    .recent-projects-slider {
      &.slick-slider .slick-prev { right: 55px; }
      &.slick-slider .slick-next { right: 10px; }  
    }
    .line-bar {
        width: calc(100% - 140px);
        left: 40px;
    }
}

/* Medium devices (tablets, less than 992px) */

@media (max-width: 991.98px) {
  .recent-projects-sec {
      & .recent-projects-wrapper {
          margin-bottom: 50px;
          padding-right: 240px;
      }
  }

  .projects-listing { 
    display: inline-flex;
    row-gap: 25px;
    & .slide-box { 
      width: 50%;
    }
  }
}

/* Small devices (landscape phones, less than 768px) */

@media (max-width: 767.98px) {

  .recent-projects-sec { 
    padding-block: 50px 60px;
  }
  a.recent-projects-box {
    & .heading-24 { font-size: 18px; gap: 10px;} 
  }
  .recent-projects-slider {
      &:has(.slick-arrow) {
          padding-bottom: 55px;
      }
  }
}

/* Extra small devices (portrait phones, less than 576px) */

@media (max-width: 575.98px) {
  .recent-projects-sec {
    padding-block: 40px;
    border-radius: 0 0 0 20px;
    & .recent-projects-wrapper {
        margin-bottom: 30px;
        padding-right: 0px;
        text-align: left;
    }
    & > .container {
      text-align: center;
      & > .btn-theme {
          position: relative;
          top: unset;
          right: unset;
          margin-top: 25px;
      }
    }
  }

  
  .line-bar { display: none;}
  .recent-projects-slider {
    text-align: left;
    &.slick-slider .slick-prev { top: calc(100% - 21px); left: calc(50% - 45px) !important; right: unset; }
    &.slick-slider .slick-next { top: calc(100% - 21px); right: calc(50% - 45px); }
  }
  .projects-listing { 
    display: inline-flex;
    width: calc(100%);
    margin-inline: 0; 
    row-gap: 25px;
    & .slide-box { 
      width: 100%;
      /* padding-inline: 10px; */
    }
    &::after { width: calc(100% - 140px); } 
  }

  a.recent-projects-box {
    & .img-wrap {
        width: 100%;
        margin-bottom: 15px;
    }    
  }
}