.herosectionrow {background: var(--darkbluebg);position: absolute;top: 0;left: 0;width: 100%;height: auto;object-fit: cover;z-index: -1;padding-bottom: 1rem;}
.header .bannersection {background: var(--darkbluebg);width: 100%;min-height: auto;}
.abcontent {width: 100%; margin-top: 130px;text-align: center;}
.abcontent .mainheading{color: #fff;padding-bottom: 0px;}
.breadcrumb{justify-content: center;padding: 0rem 0rem 0px 0px;margin-bottom: 0rem;}

/* Strat of area */
.categorypage{padding: 50px 0px 20px 0px;}
.categorypage .mainheading{text-align: center;}
.categorypage .mainheading span{color: var(--accent-color);}
.flex-container {display: flex; flex-wrap: wrap;gap:1.5rem;justify-content: center;}
.serviceitem {border-radius: 1px;overflow: hidden;flex: 0 1 calc(33.333% - 1.5rem);justify-content: center;box-sizing: border-box; transition-duration: .2s;transition-property: transform;}
.serviceitem .serviceimg {border-radius: 1px;overflow: hidden;position: relative;}
.serviceitem .serviceimg img {transition: 0.6s;}
  .details {
      background: rgba(255, 255, 255, 1);
      padding: 22px 30px 30px;
      margin: -50px 40px 40px 0px;
      transition: all ease-in-out 0.3s;
      position: relative;
      border-top:var(--surface-color) 5px solid;
      box-shadow: 0px 0 25px rgba(0, 0, 0, 0.1);
    }
  .details .sheading {
      font-weight: 600;
      margin: 5px 0 10px 0;
      font-size: 20px;font-family: var(--heading-font);
      color: #222;text-decoration: none;
      transition: ease-in-out 0.3s;
    }

  .details p {
      color: color-mix(in srgb, var(--default-color), transparent 10%);
      line-height: 24px;
      font-size: 16px;
      margin-bottom: 12px;
      display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
    }

  .serviceitem:hover .details .sheading {
      color:#fff;
    }

  .serviceitem:hover .serviceimg img {
      transform: scale(1.2);
    }

    .viewallbtn {
      background-color: transparent;
      color: #414042; font-size: 16px;
      padding: 6px 1.2rem;
      border: #a9a9a9 1px solid;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;cursor: pointer;
      transition: 0.3s;text-decoration: none;
    }
    .viewallbtn:hover {
      background-color:var(--accent-color);
      color: #fff;
      border: var(--accent-color) solid;
    }

  .serviceitem:hover .details{background: var(--surface-color);}
  .serviceitem:hover .sheading a{color: #fff;}
  .serviceitem:hover .details p{color: #fff;}
  .serviceitem:hover .viewallbtn{border: #fff 1px solid; color: #fff;}

/* Start of Ipad Pro Screen */
@media screen and (max-width:1400px) and (min-width:1301px){
.herosectionrow {height: auto;}
.abcontent {margin-top: 160px;}
.categorypage{padding: 50px 0px 50px 0px;}
.details {padding: 20px;margin: -30px 20px 25px 0px;}
}

/* Start of Ipad Pro Screen */
@media screen and (max-width:1300.98px) and (min-width:1201px){
.herosectionrow {height: auto;}
.abcontent {margin-top: 160px;}
.categorypage{padding: 50px 0px 50px 0px;}
.details {padding: 15px 15px 15px;margin: -30px 15px 25px 0px;}
}

/* Start of Ipad Pro Screen */
@media screen and (max-width:1200.98px) and (min-width:1101px){
.herosectionrow {height: auto;}
.abcontent {margin-top: 150px;text-align: center;}
.categorypage{padding: 40px 0px 40px 0px;}
.details {padding: 15px 15px 15px;margin: -30px 15px 25px 0px;}
}

/* Start of Ipad Pro Screen */
@media screen and (max-width:1100.98px) and (min-width:992px){
.herosectionrow {height: auto;}
.abcontent {margin-top: 120px;}
.categorypage{padding: 40px 0px 30px 0px;}
.details {padding: 15px 15px 15px;margin: -30px 15px 25px 0px;}
}

/* Start of Ipad Screen */
@media screen and (max-width:991.98px) and (min-width:768px){
.herosectionrow {height: auto;}
.abcontent {margin-top: 120px;}
.categorypage{padding: 40px 0px 30px 0px;}
.details {padding: 15px 15px 15px;margin: -30px 15px 20px 0px;}
}

/* Start of Mini IPad Screen */
@media screen and (max-width:767px) and (min-width:600px){
.mtops {margin-top: var(--spacing-md);}
.herosectionrow {height: auto;}
.abcontent {margin-top: 120px;}
.categorypage{padding: 30px 0px 30px 0px;}
.details {padding: 15px 15px 15px;margin: -30px 15px 15px 0px;}
.viewallbtn {font-size: 15px;padding: 5px 1rem;}
}

/* Start of Iphone/Mobile Screen */
@media screen and (max-width:599.98px) and (min-width:320px){
.mtops {margin-top: var(--spacing-md);}
.herosectionrow {height: auto;}
.abcontent {margin-top: 120px;}
.categorypage{padding: 15px 0px 15px 0px;}
.details {padding: 15px 15px 15px;margin: -30px 15px 15px 0px;}
.viewallbtn {font-size: 15px;padding: 5px 1rem;}
}