.ourServices {
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 15px;

    .card {
      position: relative;
      border: none !important;
      transition: 0.7s ease-in-out !important;
      background: #1e3256;
      height: 300px;
      padding: 20px 10px;
    }
    .card::before {
      position: absolute;
      content: "";
      width: 100%;
      height: 100%;
      transition: 0.6s;
      background-color: #2f9285;
    }
    .card:hover {
      box-shadow: 0.063rem 0.063rem 1.25rem 0.375rem rgba(0, 0, 0, 0.53);
    }
    .card:nth-child(1)::before {
      bottom: 0;
      right: 0;
      clip-path: circle(calc(6.25rem + 7.5vw) at 100% 100%);
    }
    .card:nth-child(2)::before {
      bottom: 0;
      left: 0;
      clip-path: circle(calc(6.25rem + 7.5vw) at 0% 100%);
    }
    .card:nth-child(3)::before {
      top: 0;
      right: 0;
      clip-path: circle(calc(6.25rem + 7.5vw) at 100% 0%);
    }
    .card:nth-child(4)::before {
      top: 0;
      left: 0;
      clip-path: circle(calc(6.25rem + 7.5vw) at 0% 0%);
    }
    .card p {
      position: absolute;
      transition: 0.8s;
      color: #fff;
      text-align: left;
      width: 65%;
      margin: 110px 0px;
    }
    h2 {
      position: absolute;
      width: 100%;
      text-align: center;
    }
    
    .leftCard{
      padding-left: 20px;
      h2{
        text-align: left;
      }
    }

    .rightCard{
      padding-left: 20px;
      width: 100%;
      h2{
        text-align: right;
        width: 90%;
      }
      p{
        text-align: right;
        width: 62%;
        margin-left: 150px;
      }
    }

    .card:hover::before {
      clip-path: circle(110vw at 100% 100%);
    }

    @media screen and (min-width: 62.5rem) {
      .circle {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 0;
      }
    }

    .card:nth-child(1) .circle {
      background: url("https://img.freepik.com/free-photo/develop-coding-web-design-coding-web-template_53876-167109.jpg?t=st=1722593710~exp=1722597310~hmac=c8300a2197c81416cf53845010fad17d97b22cf9a91cb46fa5b8d9099e6bd678&w=740")
        no-repeat 100% 50% / contain;
      bottom: 0;
      right: 0;
      clip-path: circle(calc(6.25rem + 7.5vw) at 100% 100%);
    }

    .card:nth-child(2) .circle {
      background: url("/Assets/Graphics.jpg")
        no-repeat 0% 10% / contain;
      bottom: 0;
      left: 0;
      clip-path: circle(calc(6.25rem + 7.5vw) at 0% 100%);
    }

    .card:nth-child(3) .circle {
      background: url("/Assets/dev.jpg")
        no-repeat 100% 100% / contain;
      top: 0;
      right: 0;
      clip-path: circle(calc(6.25rem + 7.5vw) at 100% 0%);
    }

    .card:nth-child(4) .circle {
      background: url("/Assets/web.jpg")
        no-repeat 0% 50% / contain;
      top: 0;
      left: 0;
      clip-path: circle(calc(6.25rem + 7.5vw) at 0% 0%);
    }
  }
}

@media only screen  and (max-width: 480px) {
  .ourServices{
    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
      /* gap: 15px; */
      }
    }
    .leftCard{
      p{
        width: 85%;
      }
    }
    .rightCard{
      width: 100%;
      padding: 10px;
      h2{
        width: 70%;
      }
      p{
        width: 65%;
        margin-left: 100px !important; 
      }
    }
  }



  .moreService{
    .service-holder{
      display: grid;
      grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
      gap: 10px;
      .service-item{
        background-color: #1e3256;
        color: antiquewhite;
        /* overflow: hidden; */
        position: relative;
        /* height: 10vh; */
        .icon-heading{
          transition: 0.5s all ease-in-out;
          text-align: center;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          margin: 0;
          background-color: #2f9285;
          i{
            font-size: 50px;
            padding: 20px 0px;
          }
        }
        .inner-content{
          i{
            font-size: 40px;
            float: right;
          }
        }
      }
      .service-item:nth-child(1){
        .icon-heading{
          background-color: #dc3545;
        }
      }
      .service-item:nth-child(3){
        .icon-heading{
          background-color: #ffc107;
        }
      }
      .service-item:hover{
        .icon-heading{
          background-color: transparent;
          transform: scale(1.2);
          z-index: -99;

          i,h4{
            display: none;
          }
        }

      }
    }
  }