.slider{
    max-width: 1100px;
    display: flex;
  }
  
  .box{
      padding-bottom:20px;
  }
         /* *,
   *::after,
  *::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  } */
  
  .abt_head {
    font-size: 2.5rem;
  } 
  
  body {
    /* --background-color: hsl(180, 20%, 90%); */
  
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  
    /* min-height: 100vh; */
    /* padding: 2rem; */
  
    color: hsla(0, 0%, 0%, .6);
    background: var(--background-color);
    /* text-align: center; */
  }
  
  h1 {
    font-size: 3.2rem;
    padding-top: 2rem;
  }
  
  h1+p {
    font-size: 1.8rem;
    padding: 2rem 0 3rem;
  }
  
  .main {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }
  
  .wrap {
    margin: 2rem;
  
    transform-style: preserve-3d;
    transform: perspective(100rem);
  
    cursor: pointer;
  }
  
  .container1 {
    --rX: 0;
    --rY: 0;
    --bX: 50%;
    --bY: 80%;
  
    width: 34rem;
    height: 300px;
    border: 1px solid var(--background-color);
    border-radius: 1.6rem;
    padding: 4rem;
  
    display: flex;
    align-items: flex-end;
  
    position: relative;
    transform: rotateX(calc(var(--rX) * 1deg)) rotateY(calc(var(--rY) * 1deg));
  
    background: linear-gradient(hsla(0, 0%, 100%, .1), hsla(0, 0%, 100%, .1));
    /* url("https://images.unsplash.com/photo-1559113513-d5e09c78b9dd?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjF9"); */
    background-position: var(--bX) var(--bY);
    background-size: 40rem auto;
    box-shadow: 0 0 3rem .5rem hsla(0, 0%, 0%, .2);
  
    transition: transform .6s 1s;
  }
  
  .container1::before,
  .container1::after {
    content: "";
  
    width: 2rem;
    height: 2rem;
    border: 1px solid #fff;
  
    position: absolute;
    z-index: 2;
  
    opacity: .3;
    transition: .3s;
  }
  
  .container1::before {
    top: 2rem;
    right: 2rem;
  
    border-bottom-width: 0;
    border-left-width: 0;
  }
  
  .container1::after {
    bottom: 2rem;
    left: 2rem;
  
    border-top-width: 0;
    border-right-width: 0;
  }
  
  .container1--active {
    transition: none;
  }
  
  .container--2 {
    filter: hue-rotate(80deg) saturate(140%);
  }
  
  .container--3 {
    filter: hue-rotate(160deg) saturate(140%);
  }
  
  .container1 p {
    color: hsla(0, 0%, 100%, .6);
    font-size: 2.2rem;
  }
  
  .wrap:hover .container1::before,
  .wrap:hover .container1::after {
    width: calc(100% - 4rem);
    height: calc(100% - 4rem);
  }
  
  /* .abs-site-link {
    position: fixed;
    bottom: 20px;
    left: 20px;
    color: hsla(0, 0%, 0%, .6);
    font-size: 1.6rem;
  } */
  
  
  
   
  
  /* css for bk btn */
  
  @media only screen and (max-width: 768px){
      .bk-btn{
          position: relative;
      left: 100px;
      }
  }